jQuery 使用图像按钮滚动下一个/上一个 div

Question

我刚刚找到了这段代码，它允许我只需单击下一个/上一个按钮即可在具有相同类的div 之间导航，而不是滚动，但问题是，按钮通过特定文本被触发，我想通过类来触发，如下所示：

<a href="#" class="nextButton">next</a>
<a href="#" class="prevButton">prev</a>

尽管 jquery 似乎触发了类.display，然后检查文本是"next"还是"prev"，但以下是 jsfiddle 和下面的代码：

$('div.section').first();
$('a.display').on('click', function(e) {
e.preventDefault();
  var t = $(this).text(),
  that = $(this);
if (t === 'next' && $('.current').next('div.section').length > 0) {
    var $next = $('.current').next('.section');
    var top = $next.offset().top;
    $('.current').removeClass('current');     
    $(function () {
           $next.addClass('current');
           $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
    });
} else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
    var $prev = $('.current').prev('.section');
    var top = $prev.offset().top;
    $('.current').removeClass('current');
    $(function () {
           $prev.addClass('current');
           $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
    });
} 
});

我想按类触发这些按钮，以便我可以将其从文本交换到图像，插入图像作为导航器而不是文本。

Answer 1

执行此操作的简单方法是将 ID 添加到<a>标签

<a href="#" class="nextButton" id="next">next</a>
<a href="#" class="prevButton" id="prev">prev</a>

，然后将var t更新为 喜欢 ID

var t = $(this).attr('id');

请注意if else if，因为它检查t的值，因此无论您将 ID 设置为 什么，您都需要编辑if

例如

HTML:
<a href="#" id="foo" class="display Next">next1</a><br>
<a href="#" id="bar" class="display Prev">prev2</a>
JS:
var t = $(this).attr('id');
...
if (t === 'foo' && $('.current').next('div.section').length > 0) {
...
} else if (t === 'bar' && $('.current').prev('div.section').length > 0) {
...

Answer 2

这很简单。密钥在var t = $(this).text()，这个var t用作检查器。如果var t的值next，它将向下滚动，prev也会向上滚动。

所以你只需要给var t价值next或prev.在这里，我将next和prev声明为图像id。

这是脚本var t = $(this).attr('id')的变化。这意味着$(this)指的是a谁点击了这些功能。attr('id')指的是a的id

现在，您可以在链接内添加img标签a其 id 值为 next 和prev

我更新了小提琴 http://jsfiddle.net/ufaLefjw/2/