Question

我有以下DIV布局，它在浏览器上翻译为可点击的小按钮：

<div class="ticket_option">
    <div class="tickets">2</div>
    <div class="tickets">3</div>
    <div class="tickets">4</div>    
</div>

使用以下Jquery：

// ticket button stuff
$('.tickets').toggle(function() {

  $(this).addClass('active');

}, function(){

  $(this).removeClass('active');

});

这是一种享受......当我点击div时，它会添加“活动”CSS类，并且我有所期望的结果。

然而......我想要做的是，如果一个人切换到'活动'状态并且我点击另一个状态它将删除所有其他DIV的'主动'类，并使用类'门票'但是仅在父DIV.ticket_option的上下文中。有多个ticket_option具有相同的票号可供选择。目前使用上面的代码，多个div.tickets可以在同一个div.ticket_option中“活动”，但目标是在任何时间点只有1个活动。

如何通过切换功能解决这个问题？

Answer 1

$('.tickets').click(function(){
  $(this).toggleClass('active').siblings().removeClass('active');
});

另外，如果您要为div内的ticket_option中的每一个添加一个类，那么肯定.ticket_option div会更好。

修改：我认为toggleClass()可以在这里工作。

Answer 2

考虑在无线电模式下使用带有Button插件的jQuery UI： http://jqueryui.com/demos/button/#radio

HTML标记是“正常”（<input type="radio">），插件负责执行您想要的行为。

如何使这些切换按钮更好地工作？

2 个答案: