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

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

以下是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>

---

您的问题来自如何找到活动映像。可能有多个，但您希望找到与单击的内容相关的一个。像这样更改行：

$('img.active')

例如：

$(this).closest("ul.results").find("img.active")

---

要在单击的ul中激活img.active。

您的问题来自如何找到活动图像。可能有多个，但您希望找到与单击的内容相关的一个。像这样更改行：

$('img.active')

例如：

$(this).closest("ul.results").find("img.active")

---

要在单击的ul中激活img.active。

您可以将所有内容简化为一个事件处理程序

$（'.swipe-prev，.swipe-next'）。在（'click'，函数（e）上{
var op=（$（this）.is（'.swipe prev'））？'prev'：'next'；
var firtOrlast=（$（this）.is（'.swipe prev'））？“last'：“first”；
var imgList=$（this）.closest（'.result行'）；
var currImg=imgList.find（'.result-image-act-img.active'）；
var nextImg=当前值[op]（）；
如果（nextImg.length==0）{
nextImg=imgList.find（'.result-image-act-img:'+firtOrlast）；
}
当前removeClass（“活动”）；
nextImg.addClass（“活动”）；
});
.active{
填充：3倍；
边框：1px实心#021a40；
背景色：#ff0；
}
.刷包{
显示：内联flex；
}
.轻扫包裹>div{
右边填充：10px；
}






您可以将所有内容简化为一个事件处理程序


$（'.swipe-prev，.swipe-next'）。在（'click'，函数（e）上{
var op=（$（this）.is（'.swipe prev'））？'prev'：'next'；
var firtOrlast=（$（this）.is（'.swipe prev'））？“last'：“first”；
var imgList=$（this）.closest（'.result行'）；
var currImg=imgList.find（'.result-image-act-img.active'）；
var nextImg=当前值[op]（）；
如果（nextImg.length==0）{
nextImg=imgList.find（'.result-image-act-img:'+firtOrlast）；
}
当前removeClass（“活动”）；
nextImg.addClass（“活动”）；
});
.active{
填充：3倍；
边框：1px实心#021a40；
背景色：#ff0；
}
.刷包{
显示：内联flex；
}
.轻扫包裹>div{
右边填充：10px；
}






或.nextest（“li.result行”），如果有倍数的，则为.nextest（“li.result行”）。如果有倍数的，则为.nextest（“li.result行”）。