Question

我面临的问题是我有相同的＆＃34;按钮复选框＆＃34;，但单击其中一个，我只想要更改最近的私人类。

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

切换＆＃34;复选框按钮＆＃34;。但是，显然，如果有多个按钮复选框，则所有按钮都会切换。所以我一直在尝试：

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

如何切换最近的儿童班

1 个答案: