jquery next（）和removeClass（）

Question

如果你看圖片aboive。我想要做的是當我點擊該行時，它隱藏起來，下一行變爲紅色並單擊，將其隱藏起來，然後下一個變爲可用，等等。

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

第一行遁形上點擊罰款。類「開​​始」被添加到下一行。但點擊它不起作用。

我如何通過點擊刪除紅色的行，然後下一個可用。

預先感謝您

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