javascript - 仅定位此轮播，同一页面上有多个轮播

Question

使用下面的代码，我的页面上有一个基本的轮播两次

$('.next').bind('click', function() {
    $('.current').removeClass('current').hide().next().show().addClass('current');
    if ($('.current').hasClass('last')) {
         $('.next').attr('disabled', true);
    }
    $('.prev').attr('disabled', null);
});

$('.prev').bind('click', function() {
    $('.current').removeClass('current').hide().prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('.prev').attr('disabled', true);
    }
    $('.next').attr('disabled', null);
});

这是 html

<div class="shareBox">
<p class="highlight">
    <button class="prev linkBtn" disabled="disabled">Prev</button>
    <button class="next linkBtn">Next</button>
</p>
<div class="mask">
    <ul class="shareBoxList slides">

        <li class="item">

        </li>


        <li class="item">

        </li>

        </ul>
</div>

我只想定位我正在点击的那个，但不确定在函数中的何处添加 jquery this。

谢谢

周六

Answer 1

没有 HTML，这很难，但逻辑如下:

$('.next').bind('click', function() {
    var curCarouselNode = $(this).closest('.shareBox');
    curCarouselNode.find('.current').removeClass('current').hide().next().show().addClass('current');
    if (curCarouselNode.find('.current').hasClass('last')) {
         curCarouselNode.find('.next').attr('disabled', true);
    }
    curCarouselNode.find('.prev').attr('disabled', null);
});

所以我们要做的就是获取被点击项目的最高轮播元素。然后用它来查找您想要与之交互的元素。