Javascript 使用 jquery 函数引导程序切换 setState
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34102374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap switch setState using a jquery function
提问by pablinho
I'm trying to set the state of a bootstrap switch with two external buttons, this is the code:
我正在尝试使用两个外部按钮设置引导程序开关的状态，这是代码：
<div>
<input type="checkbox" name="switch" id="switch" value="1" data-on-text="ON" data-off-text="OFF" />
</div>
<div>
<a id="set_on">ON</a>
<a id="set_off">OFF</a>
</div>
<script src="assets/jquery.min.js" type="text/javascript"></script>
<script src="assets/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-switch.js"></script>
<script>
$("#switch").bootstrapSwitch();
$( "#set_on" ).click(function() {
$("#switch").bootstrapSwitch('setState', true);
});
$( "#set_off" ).click(function() {
$("#switch").bootstrapSwitch('setState', false);
});
</script>
Clicking on the buttons ON or OFF the switch no not toggle its state. Looking on the console of the browser I read this error: TypeError: $(...).bootstrapSwitch is not a function
单击 ON 或 OFF 按钮不会切换其状态。在浏览器的控制台上我读到这个错误： TypeError: $(...).bootstrapSwitch is not a function
If I try to set the State of the bootstrap switch outside the function in this way:
如果我尝试以这种方式在函数外设置引导程序开关的状态：
<script>
$("#switch").bootstrapSwitch();
$("#switch").bootstrapSwitch('setState', false);
</script>
the switch toggle correctly to the ON state.
开关正确切换到 ON 状态。
回答by Amit Chaudhari
Please replace your code with below :
请用以下代码替换您的代码：
<script type="text/javascript">
$( document ).ready(function() {
$("#switch").bootstrapSwitch();
$( "#set_on" ).click(function() {
$("#switch").bootstrapSwitch('state', true);
});
$( "#set_off" ).click(function() {
$("#switch").bootstrapSwitch('state', false);
});
});
</script>
回答by Manoj Salvi
Try wrapping your code inside $( document ).ready(function() {});so that all of your DOM elements loads before jQuery code is executed like this :
尝试将您的代码包装在里面，$( document ).ready(function() {});以便在执行 jQuery 代码之前加载所有 DOM 元素，如下所示：
<script>
$( document ).ready(function() {
$("#switch").bootstrapSwitch();
$("#switch").bootstrapSwitch('setState', false);
});
</script>
try using it in your full script like this -
尝试在您的完整脚本中像这样使用它 -
<script>
$( document ).ready(function() {
$("#switch").bootstrapSwitch();
$( "#set_on" ).click(function() {
$("#switch").bootstrapSwitch('setState', true);
});
$( "#set_off" ).click(function() {
$("#switch").bootstrapSwitch('setState', false);
});
});
</script>
