Question

我有无序列表，列表中的每个项目都有一个图像列表。我写了一个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>

这是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');
    });

});

Answer 1

您的问题来自于您如何找到活动图像。有可能是倍数，但你想要找到与点击的内容相关的那个。改变这样的行：

$('img.active')

类似于：

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

在点击的ul中获取img.active。

Answer 2

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

$('.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>

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

2 个答案: