Jquery next（）和removeClass（）

Question

如果你看看图片abkive。我想要做的是当我点击该行时，它隐藏起来，下一行变为红色并单击将隐藏该行并且下一行变为可用等等。

＆＃13;

＆＃13;

$(document).ready(function() {

  $('.start').unbind("click").click(function() {
    $(this).removeClass("start");
    $(this).hide();
    $(this).next().addClass("start");
  });


});

＆＃13;

.start {
  color: red;
  border: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<div style="width:500px;" class="siblings">
  <ul>
    <li class="start"> 1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

第一行在点击时隐藏得很好。课程＆＃34;开始＆＃34;被添加到下一行。但点击它不起作用。

如何通过单击和下一步删除红色行变为可用。

提前谢谢

Answer 1

使用delegate。

＆＃13;

＆＃13;

$('div.siblings ul').on('click','li.start',function(){
    $(this).removeClass('start').hide().next().addClass('start');
});

＆＃13;

.start {
    color:red;
    border: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="width:500px;" class="siblings">
 <ul>
   <li class="start"> 1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>   
</div>

＆＃13;

＆＃13;

＆＃13;