Wie Sie eine aktive Klasse nur einem Elternelement mit Jquery hinzufügen?

Question

Ich habe den folgenden HTML-Code für das Quiz mit 3 Optionen. Ich möchte die Klasse .active in die Klasse hinzufügen.

<ul class="questionList"> 
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li> 
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li> 
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li> 
</ul> 

Zur Zeit habe ich den folgenden Code:

$(this).parent().find('.questionItem').addClass('active'); 

Dies ist jedoch das Hinzufügen aktiv zu ALLEN questionItem s. Stattdessen möchte ich diese Klasse genau der questionItem Klasse hinzufügen, auf die geklickt wurde.

Answer 1

Es sieht so aus als ob this sich auf das angeklickte Element bezieht, also verwenden Sie einfach die $(this). Ich habe einige Klick-Ereignisse hinzugefügt, um zu zeigen, wie this funktioniert.

$(".questionItem").click(function() { 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="questionList"> 
 
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li> 
 
</ul>

Wenn Sie jedoch stattdessen sind versucht, die Eltern zu wählen, haben Sie keine Notwendigkeit für eine .find:

$(".questionItem").click(function() { 
 
    $(this).parent().addClass('active'); 
 
});

.active { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="questionList"> 
 
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li> 
 
</ul>

Answer 2

ich denke, die folgender Code wird dir helfen!

$('.questionItem').click(function(){ 
    $(this).addClass('active').siblings().removeClass('active'); 
});