javascript - 添加下一个可见对象的ID以进行链接

我在这里想要做的是获取当前可见字段的下一个字段集的ID，以便当我按下next时，它会加载下一个字段集的ID。

它似乎达到的最佳效果是获取下一个ID之一，但停止。

$(".next").on("click", function() {

  $('this').attr("href", function() {
    return "#" + $('fieldset:visible"').next("fieldset").attr("id");
  });
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;}
html,body,fieldset{width:100%;height:100%;}
fieldset{position:relative;}
#one{background-color:red}
#two{background-color:green}
#three{background-color:blue}
#four{background-color:red}
#five{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="next" href="#two">NEXT</a>
  <fieldset id="one"></fieldset>
  <fieldset id="two"></fieldset>
  <fieldset id="three"></fieldset>
  <fieldset id="four"></fieldset>
  <fieldset id="five"></fieldset>

最佳答案

您可以将location.hash与帮助程序类active一起使用，如下所示。

希望这可以帮助。

$(".next").on("click", function(e) {
  e.preventDefault();

  $('fieldset.active').removeClass('active').next("fieldset").addClass("active");

  location.hash = "#" + $('fieldset.active').attr('id');
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;}
html,body,fieldset{width:100%;height:100%;}
fieldset{position:relative;}
#one{background-color:red}
#two{background-color:green}
#three{background-color:blue}
#four{background-color:red}
#five{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="next" href="#">NEXT</a>
<fieldset id="one" class='active'></fieldset>
<fieldset id="two"></fieldset>
<fieldset id="three"></fieldset>
<fieldset id="four"></fieldset>
<fieldset id="five"></fieldset>