切換和解開三個按鈕

Question

我有三個按鈕，我想在它們之間切換。如何添加和刪除切換和解除切斷的類以便正確切換。 現在，兩個按鈕都可以選擇/打開。應該只有一個按鈕一次切換，但我也希望能夠取消選擇/解除所有按鈕的開關。所以我有 一個不打開按鈕的選項。

下面是我的觀點的按鈕：

<div id="drawing"> 
    <div style="margin-top: 12px; padding-left: 8px; margin-bottom: 8px"> 
    <button class="small-button" onclick="Drawing.AngleClick()" data-val-btnname="Angle" style="width: 70px; height: 20px;"><span>@Culture.GetString("Angle")</span></button> 
</div> 
<div style="margin-top: 12px; padding-left: 8px;"> 
    <button class="small-button" onclick="Drawing.PointClick()" data-val-btnname="Point" style="width: 70px; height: 20px;"><span style="font-size:10px !important">@Culture.GetString("Point")</span></button> 
    <button class="small-button" data-val-btnname="ClearAll" style="width: 70px;" onclick="Drawing.Delete()"><span>@Culture.GetString("ClearAll")</span></button> 
</div> 
</div> 

這裏的js函數到目前爲止的按鈕中的一個（我有相同的，如果我在其他按鈕發言）：

AngleClick: function() { 
    var button = $('body').find("button[data-val-btnname='Angle']"); 

    if (button.hasClass('small-toggled-button')) { 
     button.removeClass('small-toggled-button').addClass('small-button'); 
    } else { 
     button.removeClass('small-button').addClass('small-toggled-button'); 
    } 
} 

Answer 1

這是切換按鈕的簡單方法。運行該代碼段以查看其工作。我簡化了你的HTML ，只是爲了縮短範例 - 我不是建議你改變它。

$(document).ready(function() { 
 
    $("#drawing button").click(function(e) { 
 
    var isActive = $(this).hasClass('active'); 
 
    $('.active').removeClass('active'); 
 
    if (!isActive) { 
 
     $(this).addClass('active'); 
 
    } 
 
    }); 
 
});

.active { 
 
    background: #555555; 
 
    color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="drawing"> 
 
    <button class="small-button">Angle</button> 
 
    <button class="small-button">Point</button> 
 
    <button class="small-button">ClearAll</button> 
 
</div>