Javascript 如何渲染引导切换
我有一个Javascript 如何渲染引导切换,javascript,jquery,css,templates,twitter-bootstrap,Javascript,Jquery,Css,Templates,Twitter Bootstrap,我有一个bootstraptoggle在Handlebar模板中,虽然页面加载时间非常完美,但在重新模板Handlebar模板(该模板具有toggle)后,它不可见 重新模板之前: 代码: <div class="switch switch-square has-switch" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fu
bootstrap
toggle在Handlebar模板中,虽然页面加载时间非常完美,但在重新模板Handlebar模板(该模板具有toggle)后,它不可见
重新模板之前:
代码:
<div class="switch switch-square has-switch" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>"><div class="switch-animate switch-off"><input type="checkbox" id="colorBar-Toggle"><span class="switch-left"><i class="fui-check"></i></span><label for="colorBar-Toggle"> </label><span class="switch-right"><i class="fui-cross"></i></span></div></div>
重新模板后:
重新设置模板代码后:
<div class="switch switch-square" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>"><input type="checkbox" id="colorBar-Toggle"></div>
车把代码:
<script id="planner-template" type="text/x-handlebars-template">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered table-responsive" id="joy_fifth" data-intro="5. You are now ready to play with the planner!" data-position="top">
<thead>
<tr>
<th width="20%">Bizstep</td>
<th width="20%">Location</td>
<th width="15%">Time Duration</td>
<th width="15%">Temperature</td>
<th width="15%">Freshtime Points</td>
<th width="15%"><div class="switch switch-square" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>"><input type="checkbox" id="colorBar-Toggle"/></div></td>
</tr>
</thead>
<tbody>...</tbody>
</script>
Bizstep
地方
持续时间
温度
新鲜时间点
...
请任何人帮助我,这对我来说非常重要。嗨,伙计们,我在重新创建模板后发现,如果我调用以下函数,它工作正常。但是调用函数后,其他切换也会起作用。我在
bootstrap switch.js
文件中找到了以下函数
我不知道为什么其他切换会起作用。在其他切换的周围,又添加了一个新的div
。正因为如此,我在主开关周围得到了额外的填充
其他切换的代码:
<div class="switch switch-square has-switch" data-on-label="2" data-off-label="1"><div class="switch-animate switch-off switch-on"><div class="switch-animate"><div class="switch-on switch-animate"><div class="switch-animate"><div class="switch-animate"><div class="switch-animate"><div class="switch-animate"><input type="checkbox" id="qtenToggle"><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle"> </label><span class="switch-right">1</span></div></div>
车把代码在哪里?标记明显不同…@Nix我添加了把手代码,你能帮我吗。我对这东西不熟悉。
$('.switch')['bootstrapSwitch']();