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

您的代码正常运行

这是一个显示该内容的片段。如果有什么想改变的地方，请写下评论，我会编辑我的答案。

＆＃13;

$('#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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用js的下一个和前一个锚点

1 个答案: