Question

我需要知道为什么要这样做，因为我在网站上的脚本标记中使用了javascript并且它无法正常工作。

为什么我的javascript在脚本标签中不起作用（交换机不会切换） http://jsfiddle.net/J7L4k/2/

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        $('.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;
});
    </script>

    <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>

然而，当javascript被移动到JSFiddles javascript容器时，它工作正常吗？ http://jsfiddle.net/udKj5/3/

非常感谢。

Answer 1

好的，所以它不起作用的原因是，在javascript首次运行时（并在'btn-toggle'上设置点击功能），页面中没有btn-toggle项（因为页面仍在加载）。

你需要在document.load

之后运行这些东西

这在jsfiddle中默认发生，这就是它在那里工作的原因。如果右键单击并检查jsfiddle页面，您会发现它已将脚本转换为：

//<![CDATA[ 
window.onload=function(){
$('.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;
});
}//]]>

显然有用......所以试试吧

Answer 2

您的Javascript正在运行，但它在DOM初始化之前运行，因此，各种JQuery选择器不匹配任何元素，代码似乎什么都不做。

要解决此问题，请将代码包装在ondomready事件处理程序中，或将所有javascript移动到页面的最底部，以便在执行脚本之前遇到DOM。

要将代码包装在ondomready事件处理程序中，请执行以下操作：

$（function（）{

//你的代码在这里

}）;

上述结构可以出现在页面的任何位置，即使在顶部也是如此，jquery会在适当的时候自动运行它。

Answer 3

这是因为您的代码在DOM元素初始化之前运行，因此代码无法在页面上找到这些元素。尝试将代码包含在

中

$(document).ready(function(){
});

或者只是

$(function () {
});

Javascript无法在脚本标签中使用？

3 个答案: