仅定位此轮播,在同一页面上定位多个轮播

target this carousel only, multiple carousel on same page

本文关键字:定位 一页      更新时间:2023-09-26

我使用以下代码在我的页面上有两个基本的轮播

$('.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 的哪个位置。

谢谢

没有 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);
});

因此,我们要做的是获得点击项目的最高轮播元素。然后使用它来查找要与之交互的元素。