0

我在一页上有多个内容滑块。每个滑块的 HTML 是下面的整个 HTML 结构。它所做的只是在无序列表中显示下一张/上一张图像。滑块的数量是动态的。我整理的代码在我第一次使用滑块时运行良好，但每隔一次“活动”类会根据我使用的不同滑块的数量跳过其他列表项。我需要重置一些东西吗？我似乎在任何地方都找不到这个特定的问题。

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>
4

1 回答 1

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');
    }
});
于 2013-11-11T05:42:09.150 回答