javascript - Bootstrap 开关未切换

Question

我正在尝试执行 Bootstrap 开关，默认情况下它设置为关闭，但是当我单击它时它不会改变？

我抓取了该网站的代码，该网站运行良好:http://www.bootply.com/92189也许我错过了什么？我真的不确定。

编辑:为什么它不能与脚本标签中的 javascript 一起使用，但可以在 JSFiddles javascript 容器中使用？ http://prntscr.com/47xuqk http://prntscr.com/47xuy6

谢谢

JSFiddle HERE

Javascript:

$('.btn-toggle').click(function() {
    $(this).find('.btn').toggleClass('active');  

    if ($(this).find('.btn-primary').size()>0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size()>0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size()>0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size()>0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
    alert($(this["options"]).val());
    return false;
});

HTML:

<h4>Tiny</h4>
  <div class="btn-group btn-toggle"> 
    <button class="btn btn-xs btn-default">ON</button>
    <button class="btn btn-xs btn-primary active">OFF</button>
  </div>

Answer 1

您尚未包含 jQuery，这是某些 Bootstrap 元素必需的依赖项。您还引用了默认的全局 jQuery 变量 ($)。

添加 jQuery 框架，就可以开始了:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>