Question

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

以下是我视图中的按钮：

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

Answer 1

这是切换按钮的简便方法。运行代码段以查看其是否有效。我只是为了缩短示例而简化了您的HTML - 我并不建议您更改它。

＆＃13;

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

＆＃13;

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

＆＃13;

= render partial: 'foo_partial', locals: {some: "stuff", goes: "here"}

＆＃13;

切换并解开三个按钮

1 个答案: