在更改之前显示引导切换文本答案

【问题标题】：show bootstrap toggle text before change在更改之前显示引导切换文本
【发布时间】：2018-03-03 05:11:36
【问题描述】：

我在我的应用程序中使用引导切换，我想要实现的是在点击实际发生之前显示文本。现在点击之前没有显示任何文本，当我点击切换时，它会导致“toggle：true”和“toggle：false”。

我想在点击发生之前显示文本 - 像这样：音乐当前：关闭，...然后点击它会变为开启/再次点击关闭..

<div class="widget widget-table">
$(function () {
    $('#toggle-event').change(function () {
    $('#music-info').html('Music is currently ' + $(this).prop('checked'))
        })
    })

html

<div id="music-info"></div>                
<input id="toggle-event" type="checkbox" data-toggle="toggle">

有什么帮助吗？

谢谢！

【问题讨论】：

嗨，你是说 onHover 吗？
不，它是一个像这样的切换bootstraptoggle.com@rick
我的意思是你想什么时候显示文本？ “点击前”太笼统了
不是已经有ON/OFF文本了吗？
我希望文本始终显示，只需在用户点击按钮 @rick 时更改值

标签： javascript jquery html twitter-bootstrap toggle

【解决方案1】：

好吧，我需要捕获点击事件，以在服务器上验证（使用 ajax 请求）用户在那个时刻是否可以更改该状态。因此，每次单击我的切换按钮都会触发一个 HTTP 请求，询问是否可以更改。我实现了以下代码：

function validateStateChangeToOnhandleData){ 
   $.get("validate-state-change-on.php") .done(function(data){ handleData(data); }); 
}

听者：

$('#toggle_wrapper').click(function(e){ e.stopPropagation(); if($('#fam_statusinscricoes').prop('checked')){ validateStateChangeToOn(function(response){ if(response){ $('#mybootstraptoggle').bootstrapToggle('on'); }else{ alert("It can be changed!"); } }) }else{ validateStateChangeToOff(.....).... };

“validateStateChangeToOff”与“validateStateChangeToOn”非常相似。

我希望它可以帮助某人。

【讨论】：

【解决方案2】：

我不确定我是否理解你，这是你想要的吗？

$(function () {

    $('#music-info').html('Music is currently ' + ($('#toggle-event').prop('checked') ? 'ON' : 'OFF') )

    $('#toggle-event').change(function () {
        $('#music-info').html('Music is currently ' + ($(this).prop('checked') ? 'ON' : 'OFF') )
    });
});

在这里查看...https://fiddle.jshell.net/rigobauer/wfrLsa2h/

【讨论】：

正是我想要的。现在如果我理解正确 = ($('#toggle-event').prop('checked') ? 'ON' : 'OFF') ) - 这意味着如果值为真则显示打开，如果值为假则显示关闭？
很高兴听到！祝你有美好的一天，愉快的编码！