Wie am nächsten Kinder Klasse

Question

wechseln Das Problem, das ich konfrontiert ist, dass ich identische "Button-Checkboxen" habe, aber sobald sie angeklickt wird, möchte ich nur die nächste private Klasse zu ändern.

<span class="button-checkbox"> 
    <button type="button" onclick="privateClick()" class="btn btn-sm btn-default"> 
     <i class="fa fa-square-o private"></i> 
    <button> 
    <input name="private" type="checkbox" class="hidden" /> 
</span> 
<span class="button-checkbox"> 
    <button type="button" onclick="privateClick()" class="btn btn-sm btn-default"> 
     <i class="fa fa-square-o private"></i> 
    <button> 
    <input name="private" type="checkbox" class="hidden" /> 
</span> 

Ich verwende derzeit:

function privateClick() 
{ 
    $(".private").toggleClass('fa-square-o fa-check-square-o'); 
} 

die "Checkbox Button" zu wechseln. Aber wenn es mehr als ein Button-Kontrollkästchen gibt, schalten sich alle um. Also habe ich versucht mit:

var closest_tag = $(this).find('.private').first(); 
closest_tag.toggleClass('fa-square-o fa-check-square-o'); 

Leider wird die Klasse überhaupt nicht umgeschaltet.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Sie sich von Ihrem Onclick-Ereignis befreien und nur jquery auf Ereignis verwenden, wie folgt aus:

$("button").on("click", function(){ 
 
var itag = $(this).find("i"); 
 
    itag.toggleClass('fa-square-o fa-check-square-o'); 
 
    itag.text(itag.attr("class")) 
 
})

button{ 
 
    display:block; 
 
    padding:50px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="button-checkbox"> 
 
    <button type="button" id="1" data-color="white" class="btn btn-sm btn-default"> 
 
     <i class="fa fa-square-o private"></i> 
 
     </button> 
 
    <input name="private" type="checkbox" class="hidden" /> 
 
</span> 
 
<span class="button-checkbox"> 
 
    <button type="button" id="1" data-color="white" class="btn btn-sm btn-default"> 
 
     <i class="fa fa-square-o private"></i> 
 
     </button> 
 
    <input name="private" type="checkbox" class="hidden" /> 
 
</span/>