如何使這些切換按鈕的工作更好一點？

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個激活。

如何用toggle功能去解決這個問題？

Answer 1

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

另外，如果您要添加一個類的div S的每一個內ticket_option，那麼肯定會.ticket_option div更好地工作。我想toggleClass()會在這裏工作。

Answer 2

考慮使用jQuery UI在收音模式按鈕插件： http://jqueryui.com/demos/button/#radio

的HTML標記爲「正常」（一個<input type="radio">）和插件需要強制你想要的行爲負責。