1

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

谢谢科技男孩

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

3 回答 3

2

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

然后所有按钮都有一个单击处理程序，您单击的按钮将获得 ButtonOn 类，而所有兄弟姐妹将获得 ButtonOff。

于 2013-06-01T13:09:50.377 回答
2

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

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

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

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

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

演示

根据您希望如何处理已经“打开”的跨度上的点击，您可能必须分别处理前一个元素和当前元素：

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

演示

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

于 2013-06-01T13:11:07.537 回答
1

使所有按钮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');
});
于 2013-06-01T13:23:06.630 回答