javascript - 使用 js 的下一个和上一个 anchor

Question

我有一个页面，其中显示了所有问题的答案，并且不时更新答案。我想要一个 NEXT 和 PREVIOUS 按钮，它们将滚动到下一个或上一个新的/更新的答案。

所有新的/更新的答案都有一个带有 id= new_@i 的标签元素，其中 i 是一个索引，class= "new":

<label id="new_@i" style="display:none" class="new">new_@i</label>

然后，我创建了一个按钮:

<label class="button" id="nextnew">NEXT</label>

并尝试实现 JS 部分，但不知何故窗口没有滚动到目标:

$('#nextnew').click(function(e) {
        var selected = $(".new.currentSelected");
        var anchors = $(".new");

        var pos = anchors.index(selected);
        var next = anchors.get(pos+1);
        var prev = anchors.get(pos-1);

        target = $(next);

        $(selected).removeClass("currentSelected");
        $(next).addClass("currentSelected");

        if (target.offset()) {
            $('html, body').animate({scrollTop: target.offset().top + 'px'}, 600);
        }
        e.preventDefault();
    });

我仔细检查了 JS 部分中的变量，它们看起来不错。任何想法，问题是什么？

Answer 1

您的代码可以正常工作

这里有一个片段可以说明这一点。如果您想更改某些内容，请在评论中写下，我会编辑我的答案。

$('#nextnew').click(function(e) {
  var selected = $(".new.currentSelected");
  var anchors = $(".new");

  var pos = anchors.index(selected);
  var next = anchors.get(pos + 1);
  var prev = anchors.get(pos - 1);

  target = $(next);

  $(selected).removeClass("currentSelected");
  $(next).addClass("currentSelected");

  if (target.offset()) {
    $('html, body').animate({
      scrollTop: target.offset().top + 'px'
    }, 600);
  }
  e.preventDefault();
});

.new {
  margin: 10px 0;
  padding: 5px 8px;
  background: #EEE;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="button" id="nextnew">NEXT</label>

<label id="new_@1" class="new">new_@1</label>
<label id="new_@2" class="new">new_@2</label>
<label id="new_@3" class="new">new_@3</label>
<label id="new_@4" class="new">new_@4</label>
<label id="new_@5" class="new">new_@5</label>
<label id="new_@6" class="new">new_@6</label>
<label id="new_@7" class="new">new_@7</label>
<label id="new_@8" class="new">new_@8</label>
<label id="new_@9" class="new">new_@9</label>
<label id="new_@10" class="new">new_@10</label>
<label id="new_@11" class="new">new_@11</label>
<label id="new_@12" class="new">new_@12</label>
<label id="new_@13" class="new">new_@13</label>
<label id="new_@14" class="new">new_@14</label>
<label id="new_@15" class="new">new_@15</label>
<label id="new_@16" class="new">new_@16</label>
<label id="new_@17" class="new">new_@17</label>
<label id="new_@18" class="new">new_@18</label>
<label id="new_@19" class="new">new_@19</label>
<label id="new_@20" class="new">new_@20</label>
<label id="new_@21" class="new">new_@21</label>