Jquery next（）and removeClass（）

Question

画像を見ると、私がしたいことは、私が行をクリックすると、それが隠れて、次の行が赤くなり、それを隠すことになり、次に利用できるようになります。

$(document).ready(function() { 
 

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

 

 
});

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

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

最初の行は、クリックの上に離れて罰金非表示にします。クラス "start"は次の行に追加されます。しかし、それをクリックしても機能しません。

クリックして次へと赤い行を削除するにはどうすればいいですか？

は事前

Answer 1

でいただきありがとうございます。この1

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

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

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

Answer 2

delegateを使用してみてください。

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

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

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