如何在点击另一个div时添加li类

Question

我有两个div：＃slider-next和＃slider-prev。我也有4李元素。每次点击＃滑块 - 接下来我需要为每个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> 

后点击＃滑盖未来它应该是这样的：

<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> 

应该通过点击就像是在启动 重复这里是我的代码，但它仅用于补充类第二李：

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

Answer 1

我想接近它这样

function arrowNav(prev) { 
 
    // get the current index of the active item 
 
    var index = $('.items-list li.active').index(); 
 

 
    // remove the active class from all items 
 
    $('.items-list li').removeClass('active'); 
 

 
    // add or subtract one if next or previous 
 
    var newIndex = prev ? index - 1 : index + 1; 
 

 
    // rolling over the top or bottom 
 
    if (newIndex < 0) 
 
    newIndex = $('.items-list li').length - 1; 
 
    else if (newIndex >= $('.items-list li').length) 
 
    newIndex = 0; 
 

 
    // setting the class of the new active item 
 
    $('.items-list li').eq(newIndex).addClass('active'); 
 
} 
 

 
$('#slider-prev').on('click', function() { 
 
    arrowNav(true) 
 
}); 
 
$('#slider-next').on('click', function() { 
 
    arrowNav(false) 
 
});

.active { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
<button id="slider-prev"> 
 
    Prev 
 
</button> 
 
<button id="slider-next"> 
 
    Next 
 
</button>

Answer 2

两点意见：

一般而言，我宁愿使用$(document).ready()或类似的东西，以确保始终有一个class="active"（因为您在做滑块似乎是合理的），而不是查看是否存在该条件。

$('li:nth-child(1)')总是选择第一个<li>，而不是之前活动的那个。你可能就要什么是

$('li.active')   // Selects the li with class active 
    .removeClass('active') // returns the same li acted on 
    .next()    // selects the next li 
    .addClass('active'); // adds the class active 

“链”的这种方法是什么使jQuery那么方便:)

一部分。如果你想让它“环绕”你可以不喜欢

var $next = $('li.active') // Selects the li with class active 
    .removeClass('active') // returns the same li acted on 
    .next();     // selects the next li 
if ($next.length === 0) { 
    $next = $('li:first'); 
} 
$next.addClass('active'); // adds the class active 

Answer 3

您可以使用类似

var item = $("ul").closest("li"); 
var item2 = item.closest(".active"); 
item2.toggleClass("active"); 

if (item2.next("li") != null) { 
    item2.next("li").toggleClass("active"); 
} else { 
    item.toggleClass("active"); 
} 

Answer 4

我认为这是你的好方法按照

$(".next").on("click", function(){ 


if($(".active").next("div").html() === undefined) { 
    $(".active").removeClass("active"); 
    $("div").first().addClass("active"); 
    } else { 
    $(".active").removeClass("active").next("div").addClass("active"); 
    } 

}) 
$(".prev").on("click", function(){ 
    if($(".active").prev("div").html() === undefined) { 
     $(".active").removeClass("active"); 
    $("div").last().addClass("active"); 
    } else { 
    $(".active").removeClass("active").prev("div").addClass("active"); 
    } 
}) 

这里有一个小提琴：https://jsfiddle.net/v58jzp9L/

这里是一个循环:) https://jsfiddle.net/v58jzp9L/2/

Answer 5

你应该有国家的一些概念，跟踪其li S的是"active"一个更新。这可能是一个数组，看起来像这样简单：

const state = { 
    list_items: [false, true, false, false] 
}; 

或者，更简洁，单号，代表li是"active"

const state = { 
    active_list_item: 1 
}; 

随后的指数，当你按NEXT ，您可以适当增加state.active_list_item。找到一种方法来管理溢出。它是否包裹？如果没有，可以使用createClamp(..)函数。否则，请使用createWrap(..)函数。

当状态发生变化时，您会希望合适的DOM副作用从状态变化中流出。

let list_items = document.getElementsByClassName('items-list')[0].children; 
list_items = [].slice.apply(list_items); 

list_items.forEach((list_item, i) => { 
    if (i === state.active_list_item) { 
    list_item.classList.add('active'); 
    } 
    else { 
    list_item.classList.remove('active'); 
    } 
}); 

您应该能够弄清楚如何现在创建“上一个”功能。

Answer 6

如果你需要圆形下一首和上，你可以试试这个：

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

Answer 7

也许是这样的：

var list_items = $(".items-list li"); 
 
var li_active = 1; 
 
var li_total = list_items.length; 
 

 
$("#prev").click(function() { 
 
    list_items.removeClass('active'); 
 
    if (li_active == 1) { 
 
    li_active = li_total; 
 
    } else { 
 
    li_active--; 
 
    } 
 
    $('.items-list li:nth-child(' + li_active + ')').addClass('active'); 
 
}); 
 

 
$("#next").click(function() { 
 
    list_items.removeClass('active'); 
 
    if (li_active == li_total) { 
 
    li_active = 1; 
 
    } else { 
 
    li_active++; 
 
    } 
 
    $('.items-list li:nth-child(' + li_active + ')').addClass('active'); 
 
});

.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 

 
<button id="prev">Prev</button> 
 
<button id="next">Next</button>