引导按钮切换/切换状态答案

【问题标题】：Bootstrap button toggle/switch status引导按钮切换/切换状态
【发布时间】：2020-06-15 19:49:13
【问题描述】：

我有一个基于引导按钮的切换/开关。我相信它来自http://www.bootstrap-switch.org/，但他们的网站无法正常工作，所以我无法获得任何文档。

我试图让开关在用户更改开关位置时启动两种模式之一。

<button type="button" class="btn btn-sm btn-toggle btn-info active" data-toggle="button" aria-pressed="true" autocomplete="off" id="ProcessingOnOff">

    $('#ProcessingOnOff').click(function(){
   $(this).is(':active')?$('#myModal').modal('show'):"";
});

$('#ProcessingOnOff').click(function(){
   !$(this).is(':active')?$('#myModal2').modal('show'):"";
});

https://jsfiddle.net/Airfox/oqtbm9pe/

开关每次都会启动模态 #2。我假设这是因为模态 #2 设置为 a ！（不）地位，还有很多事情不是。我尝试过“活动”、“真实”、“1”、“点击”，甚至“已检查”，但我无法弄清楚实际状态是什么。

像这样的开关/拨动开关真的有状态吗？如果不是，我如何应用状态以使其可操作？

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

对于同一个元素，您有 2 个点击处理程序，这意味着它们不会像您希望的那样运行。

我将其更改为一键式处理程序并使用hasClass 而不是is:active。此功能在您的小提琴中有效。

$('#ProcessingOnOff').click(function(){
    var modal_id = ($(this).hasClass('active')) ? "#myModal" : "#myModal2";
    $(modal_id).modal('show');
});

【讨论】：