Как переключить ближайший класс детей

Question

Проблема, с которой я сталкиваюсь, заключается в том, что у меня одинаковые «кнопки-флажки», но один раз из них щелкнут, мне нужен только ближайший частный класс.

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

настоящее время я использую:

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

для переключения на кнопку "флажок". Но, очевидно, если есть более одной кнопки-флажка, все они переключаются. Поэтому я пытался:

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

К сожалению, класс не переключается вообще.

Любая помощь была бы принята с благодарностью!

Answer 1

Избавьтесь от события OnClick и просто использовать JQuery на события, как это:

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