如何切换最近 children class

Question

我面临的问题是我有相同的 "button-checkboxes"，但是一旦点击其中一个，我只想更改最近的私有 class。

<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');
}

切换 "checkbox button"。但是，很明显，如果有一个以上 button-checkbox，它们都会切换。所以我一直在尝试：

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

不幸的是，class 根本没有切换。

如有任何帮助，我们将不胜感激！

Answer 1

去掉你的 onclick 事件，只使用 jquery on 事件，像这样：

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

如何切换最近 children class

How to toggle closest children class

jquery

jquery-file-upload