javascript - 添加下一个可见对象的 id 来链接

Question

我在这里想做的是获取当前可见字段集的下一个字段集的 id，这样当我按“下一步”时，它会使用下一个字段集的 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>

Answer 1

您可以将 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>