为什么切换（）不起作用？答案

【问题标题】：Why Is toggle() Not Working?为什么切换（）不起作用？
【发布时间】：2018-03-24 04:46:03
【问题描述】：

我有一个 jsFiddle 按我的意愿工作：http://jsfiddle.net/6wuUc/64/

但由于某种原因，当我使用完全相同的代码时，我在单击按钮时没有看到动画。这是我在页面上使用的代码。

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<link rel="stylesheet" href="_/css/style.css">

<script src="_/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });
</script>

</head>

<body>

<div id="video">
    <div class="sublime">
        <p class="sv_play_button">Click</p>
    </div>    
</div>

</body>
</html>

还有 CSS：

#video, #video .sv_play_button {position: absolute;}

#video { margin-left: -346px; width: 670px; height: 546px; background-color: blue;}

.sublime { width: 1016px; height: 546px; background-color: red; opacity: 0.8; }

.sv_play_button {padding: 5px; background-color: yellow; top: 0px; right:0px; }

有人知道为什么 toggle() 在我的页面上不起作用吗？提前致谢。

【问题讨论】：

标签： jquery toggle

【解决方案1】：

问题

您尚未将 jquery 包装在运行任何 jquery 事件所需的 $(document).ready() 中。

发生的情况是 javascript 甚至在加载 jquery 之前就尝试运行 jquery 代码，这就是为什么您必须等到文档加载完成（使用 .ready()）。

您的新 javascript 应如下所示：

$(document).ready( function() {
$('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });
});

注意：请记住，您的所有函数都必须在此之外，否则它们将无法调用。还要记住，这个包装器是一个函数，所以必须在它之外定义全局变量。

如果您还没有引用它，您需要像这样在脑海中引用 jquery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

参考文献

$(document).ready()

【讨论】：

好吧，我一定是做错了什么。我已经创建了一个链接到我的页面的 functions.js 文件，并将我的 jquery 放在函数文件中的 $(document).ready() 块中。还是不行。
是的，我试过像你展示的那样在结束 body 标签之前放。
在您引用了 jquery 文件后尝试将其放在您的脑海中，（我已将此添加到答案中）
仍然没有骰子，伙计。我应该上传文件吗？

【解决方案2】：

它不起作用，因为您在页面加载之前执行了脚本。当您的脚本运行时，您搜索的元素尚不存在，因此您的 jQuery 选择器找不到任何可操作的元素。

将你的函数包装在一个文档就绪块中，你应该已经准备好了。

jQuery(function(){
    your code here
})

参考：http://api.jquery.com/jQuery/#jQuery3

切换也不支持您调用它的方式。 http://api.jquery.com/toggle/

你不能传递两个函数（据我所知），因为切换只显示或隐藏一个元素。编辑：MagicDev 指出toggle event api

【讨论】：

其实.toggle 也可以用来做他想做的事，阅读api.jquery.com/toggle-event
感谢@MagicDev 的链接。不知道那个快捷方式。
感谢您的建议，但我仍然无法使其正常工作。知道为什么吗？
似乎适用于此jsfiddle.net/RWrQS。一定有其他因素影响了您的脚本。
简单...您的脚本中有一个非法字符。 â€‹Chrome 开发者工具立即指出了这一点。用notepad++打开你的脚本，用UTF8编码。或者重新输入你的脚本。在这种情况下复制/粘贴是不好的。

【解决方案3】：

您也可以将脚本移动到页面底部的 </body> 标记正上方。

...
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });
</script>
</body>

【讨论】：

【解决方案4】：

您尚未将 jquery 包装在运行任何 jquery 事件所需的 $(document).ready() 中。

【讨论】：