下一个/上一个 jQuery 控件类跳转了太多的列表项

Question

我在一页上有多个内容滑块。每个滑块的 HTML 是下面的整个 HTML 结构。它所做的只是在无序列表中显示下一个/上一个图像。滑块的数量是动态的。我放在一起的代码在我第一次使用滑块时工作正常，但每隔一段时间，"active"类就会跳过其他列表项，具体取决于我使用的不同滑块的数量。我需要重置某些内容吗？我似乎在任何地方都找不到这个特定问题。

jQuery：

$('.portfolio-link').click(function(){
    $(this).parent().parent().next().find('#slider li:first-child').addClass('active');
    $('.nav-container .next').click(function(){
        if (!$('#slider li.active').is(':last-child')){
            $('#slider li.active').next().addClass('active').siblings('.active').removeClass('active');
        };
    });
    $('.nav-container .prev').click(function(){
        if (!$('#slider li.active').is(':first-child')){
            $('#slider li.active').prev().addClass('active').siblings('.active').removeClass('active');
        };
    });
});

相关的 HTML 结构：

<div class="portfolio-container">
    <div class="mask">
        <a class="portfolio-link">View more</a>
    </div>
</div>
<div class="portfolio-content">
    <div class="inner-portoflio-content">
        <div class="portfolio-slideshow">
            <div class="slider-container">
                <ul id="slider">
                    <li>Slide info</li>
                    <li>Slide info</li>
                </ul>
            </div>
            <div class="nav-container">
                <a class="next">Next</a>
                <a class="prev">Previous</a>
            </div>
        </div>
    </div>
</div>

Answer 1

每次

单击.portfolio-link时，您都会创建一个新的事件处理程序 无用且混乱 + 利用.on可以根据需要自由添加/删除元素

$(document.body).on('click','.portfolio-link',function(){
   $(this).parent().parent().next().find('#slider li:first-child').addClass('active');
   })
.on ('click','.nav-container .next',function(){
    if (!$('#slider li.active').is(':last-child')){
        $('#slider li.active').next().addClass('active').siblings('.active').removeClass('active');
    }
})
.on('click','.nav-container .prev',function(){
    if (!$('#slider li.active').is(':first-child')){
        $('#slider li.active').prev().addClass('active').siblings('.active').removeClass('active');
    }
});