單擊另一個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

如果您需要循環的“下一個”和“上一個”，則可以嘗試以下操作：

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 2

我認為這是您遵循的好方法

$(".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 3

我會這樣處理

 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 4

也許是這樣的：

 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> 

Answer 5

兩條評論：

通常，我寧願使用$(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 6

您可以使用類似

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 7

您應該具有某種狀態概念，以跟蹤哪個li是"active" 。 這可以像看起來像這樣的數組一樣簡單：

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

或者，更簡潔地說，是一個單一的數字，表示"active"的li的索引

const state = {
  active_list_item: 1
};

然后，當您按下一步時，可以適當地增加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');
  }
});

您現在應該能夠弄清楚如何創建“上一個”功能。