how to use same jQuery function on multiple group of lists

Question

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.

Here is the html code:

Here is the jQuery function:

$(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');
    });

});

gaetanoM · Accepted Answer

You may reduce everything to only one event handler.

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

how to use same jQuery function on multiple group of lists

Answers (2)

Related Questions