javascript - 单击另一个div时如何添加li类

Question

我有两个 div:#slider-next 和 #slider-prev。我还有 4 个 li 元素。在每次点击#slider-next 时，我需要向每个 li 添加 .active 类。 第一眼:

   <ul class="items-list">
        <li class="active" id="l1">One</li>
        <li id="l2">Two</li>
        <li id="l3">Three</li>
        <li id="l4">Four</li>
    </ul>

点击#slider-next 之后它应该看起来像:

<ul class="items-list">
    <li id="l1">One</li>
    <li class="active" id="l2">Two</li>
    <li id="l3">Three</li>
    <li id="l4">Four</li>
</ul>

它应该像开始时一样通过点击重复 这是我的代码，但它只为第二个 li 添加类:

function arrowNext() {
    if( $('#l1, #l2, #l3, #l4').hasClass('active') ) {
        $('.items-list li').removeClass('active');
        $('li:nth-child(1)').next().addClass('active');
    }
}

Answer 1

如果你需要循环 Next 和 Previous，你可以试试这个:

var nextCircularIndex = function(currentIndex, totalIndex) {
    currentIndex = currentIndex + 1;
    return currentIndex % totalIndex;
}

var previousCircularIndex: function (currentIndex, totalIndex) {
    currentIndex = currentIndex - 1;
    return currentIndex < 0 ? totalIndex - 1 : currentIndex;
}

然后像这样改变arrowNext

var currentSlider = 0;
var totalSlider = 4;

function arrowNext() {
   currentSlider = nextCircularIndex(currentSlider, totalSlider);
   $("ul.items-list li.active").removeClass('active');
   $("ul.items-list li:nth-child(" + currentSlider + ")").next().addClass('active');
}

function arrowPrevious() {
   currentSlider = previousCircularIndex(currentSlider, totalSlider);
   $("ul.items-list li.active").removeClass('active');
   $("ul.items-list li:nth-child(" + currentSlider + ")").next().addClass('active');
}