Question

我只想在每次点击时从第一个元素到最后一个元素移动类。在我第一次单击时，它会将类添加到第一个<li>，然后在第二次单击时将类移到第二个<li>并从第一个类中删除该类，依此类推。

<script>
    $(function() {
        $('button').on('click', changeClass);

        function changeClass() {
            var ind = $(this).index();
            var i = 0;
            $("li").eq(i).addClass("current").siblings().removeClass("current");
        }
    });
</script>

http://codepen.io/anon/pen/QNyWQL

Answer 1

您可以使用eq()方法执行此操作。首先将index设置为0并获取li的总数，然后点击该按钮从所有current中删除li课程并设置current } {到li的{{1}}。之后，将索引增加index。在上次使用1之后取回第一个li。

＆＃13;

(index+1) % total

＆＃13;

var index = 0;
var total = $("li").length;

$("button").click(function() {
  $("li").removeClass("current");
  $("li").eq(index).addClass("current"); 
  index = (index+1) % total;
});

＆＃13;

.current{color:red}

＆＃13;

Answer 2

另一种没有索引的方法。

$oDesign = Mage::getDesign()->setArea( 'adminhtml' );
$oDesign = Mage::getDesign()->setArea( 'frontend' );
var_dump( $oDesign );
$sUrl = $oDesign->getSkinUrl('images/image.gif');
var_dump( $sUrl );

$("button").click(function(){
  var el = $('li.current');

  if(el.length == 0){
     $('ul').find('li').eq(0).addClass('current');//if no current exist
     return;
  }
  $('li.current').removeClass('current');
  if(typeof el.next() !== 'undefined'){
      el.next().addClass('current');
  }
})

.current{color:red}

Answer 3

首先找到 next li与课程＆＃39; current＆＃39;以及删除当前li的类。然后检查长度是否> 0表示元素存在，否则不存在。

$('button').on('click', function() {
   var next = $('#main').find('li.current').removeClass('current').next('li');
   if(next.length) { next.addClass('current'); }
   else { $('#main').find('li').first().addClass('current'); }
});

<ul id="main">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li> 
  <li>Five</li>
</ul>

https://jsfiddle.net/sbLhewgh/

单击时逐个将类添加到所有元素

3 个答案: