gpt4 book ai didi

javascript - 如何在多组列表上使用相同的 jQuery 函数

转载 作者:行者123 更新时间:2023-12-01 02:14:16 26 4
gpt4 key购买 nike

我有无序列表,列表中的每个项目都有一个图像列表。我编写了一个 jQuery 函数来使用 prev 和 next 操作 slider 。当只有一个图像列表时,该函数可以正常工作。尽管如此,当我有列表并且每个项目都有图像列表时,当我单击任何 slider 时,无论我单击哪个 slider ,只有第一个 slider 正在工作。我的问题是,如何修改 jQuery 函数以仅对我单击的 slider 进行操作,而不对其他图像组的其他 slider 进行操作。

这是html代码:

<ul class="results">
<li class="result-row">
<!-- image box -->

<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">

<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>

<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p>&lt;</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>&gt;</p>
</div>
</a>
</div>
</div>
</a>
</li>

<!-- -->
<li class="result-row">
<a href="#">

<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>

<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p>&lt;</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>&gt;</p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

这是 jQuery 函数:

$(document).ready(function() {


$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});

$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});

});

最佳答案

您可以将所有内容减少到只有一个事件处理程序。

$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="results">
<li class="result-row">
<!-- image box -->

<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>

<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p>&lt;</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> &gt;</p>
</div>
</a>
</div>
</div>
</a>
</li>

<!-- -->
<li class="result-row">
<a href="#">

<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>

<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p>&lt;</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>&gt;</p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

关于javascript - 如何在多组列表上使用相同的 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49565270/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com