Question

我刚刚发现这个代码，它允许我在具有相同类的div之间导航，只需单击下一个/ prev按钮而不是滚动，但问题是，按钮是通过特定文本触发的，我想要通过类来触发，比如这样：

<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

e.g。

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/

jQuery滚动下一个/上一个Div与图像按钮

2 个答案: