时间戳

首页 > 解决方案 > 引导按钮切换/切换状态

javascript - 引导按钮切换/切换状态

问题描述

我有一个基于引导按钮的切换/开关。我相信它来自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”、“已点击”，甚至“已检查”，但我无法弄清楚实际状态是什么。

像这样的开关/切换实际上有状态吗？如果不是，我如何申请状态以使其可操作？

标签： javascriptjquerytwitter-bootstrapbootstrap-4

解决方案

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

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

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

推荐阅读