Question

我有两个div：＃slider-next和＃slider-prev。我也有4个li元素。每次单击#slith-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');
}

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

这种＆＃34;链接＆＃34;是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如此方便的一部分：）

如果你想要＆＃34;环绕＆＃34;你可以做点什么

for name in text:gmatch "(@[%a%d]+)" do
    print(name:sub(2, -1))
end

Answer 6

您可以使用类似

的内容

function Person(name){
    this._name = name;
}

Object.defineProperty( Person.prototype, 'name', {
    get:function(){ return this._name; }
})

Answer 7

你应该有一些状态概念来跟踪li中的"active"是const state = { list_items: [false, true, false, false] };。这可能就像一个看起来像这样的数组：

li

或者，更简洁地说，是一个数字，代表"active"的{{1}}索引

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

你应该能够弄清楚如何创建＆＃34;之前的＆＃34;功能现在。

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

7 个答案: