jquery - 在 div jquery 中选择一个类

Question

我有一个 div，里面有一些 span 元素，当我单击其中一个元素时，它会打开，而其他所有元素都会关闭。它第一次工作，即打开，但我无法关闭，它还会选择具有相同 id 的所有范围。我对 Jquery 很陌生并且很挣扎!非常感谢任何指点

谢谢Techboy

<div id="btn-grp">
        <span class="button ButtonOn">button1</span> 
        <span class="button ButtonOff">button2</span>
        <span class="button ButtonOff">button3</span>
        <span class="button ButtonOff">button4</span>
        <span class="button ButtonOff">button5</span>
</div>


<script type="text/javascript">

    $("#btn-grp").click(function(){
        $(this).addClass('ButtonOn').siblings().removeClass('ButtonOff');
    }); 

</script>

Answer 1

I have a div with some span elements inside that when I click one it turns on and all the others turn off.

听起来您想将 ButtonOn 类添加到单击的元素中，并将其从以前拥有它的元素中删除。同样，您希望从单击的元素中删除 ButtonOff 类，并将其添加到之前“选定的”元素中。

您当前的代码根本不执行此操作。它将 ButtonOn 类添加到单击的元素，并从其同级元素中删除 ButtonOff 类。您永远不会从任何元素中删除 ButtonOn 类。此外，您将事件处理程序绑定(bind)到元素的父。因此，您实际上是将这些类应用于父级，并且样式可能会向下级联，以便您得到意想不到的行为。

<小时/>

因此，您必须添加和删除这两个类并将事件处理程序绑定(bind)到正确的元素:

$("#btn-grp span.button").click(function(){
    $(this).siblings('.ButtonOn').add(this).toggleClass('ButtonOn ButtonOff');
});

DEMO

根据您想要如何处理已经“打开”范围内的点击，您可能必须分别处理前一个元素和当前元素:

$(this).siblings().removeClass('ButtonOn').addClass('ButtonOff');
$(this).addClass('ButtonOn').removeClass('ButtonOff');

DEMO

FWIW，我不会使用两个类来指示按钮的状态。我只会使用一个类将按钮标记为“打开”，并将所有其他按钮默认设置为“关闭”。