我在一页上有多个内容滑块。每个滑块的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>
每次.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');
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句