JQuery next() und removeClass()

Question

wenn Sie aboive in Bild aussehen. Was ich tun möchte, ist, wenn ich auf die Zeile klicke, versteckt sie sich, die nächste Zeile wird rot und klickt darauf, dass sie das ausblenden würde und als nächstes verfügbar wird und so weiter.

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

Die erste Reihe verstecken, auf Klick in Ordnung. Die Klasse "Start" wird zur nächsten Zeile hinzugefügt. Aber das Klicken funktioniert nicht.

Wie kann ich die rote Zeile entfernen, indem Sie auf klicken und das nächste wird verfügbar.

Vielen Dank im Voraus

Answer 1

versuchen Sie dieses

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

Verwenden Sie ein 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>