在div jquery中选择一个类

Question

我有一个带有一些span元素的div，当我点击一个时它会打开，所有其他元素都会关闭。它第一次工作，即打开，但我无法关闭，它也选择具有相同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

您使用的选择器对此目的不是很有用，因为它为按钮组添加了一个单击处理程序，而不是按钮本身，使用 而是$(".button").click(...。

然后所有按钮都有一个点击处理程序，你点击的按钮获得了ButtonOn-class，而所有的兄弟都会得到ButtonOff。

Answer 2

  

我有一个带有一些span元素的div，当我点击它时它会打开而所有其他元素都会关闭。

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

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

---

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

$("#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，我不会用两个类来表示按钮的状态。我只想使用一个类将按钮标记为“on”，并将所有其他类默认设置为“off”。

Answer 3

默认情况下将所有按钮OFF设为彩色（表示根本不使用.ButtonOff）：

的 LIVE DEMO

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

CSS：

.button{
  cursor:pointer;
  border-radius:5px;
  padding:4px 14px;
  margin:4px;
  display:inline-block;
  background:#ddd;
}

.ButtonOn{
  background:#cf5;
}

而不仅仅是：

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