切换和取消切换三个按钮

Toggle and untoggle three buttons

本文关键字：按钮 三个 取消      更新时间：2023-09-26

我有三个按钮，我想在它们之间切换。如何添加和删除切换和取消切换类以必须适当地切换。现在，可以选择/打开这两个按钮。一次只能切换一个按钮，但我也希望能够取消选择/取消切换所有按钮。这样我就有不打开按钮的选项。

以下是我视图中的按钮： 

<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 函数（我在另一个按钮中有相同的 if 语句）： 

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');
    }
}

这是切换按钮的简单方法。运行代码段以查看其工作情况。我简化你的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>

相关文章：