Question

我在让脚本运行时遇到了全面的问题。它们在jsFiddle中运行良好，但是当我将它们带入网站时，我看不到脚本生效了。

我的问题是，将脚本实现到页面的最佳做法是什么？是否不赞成复制/粘贴？

供参考，这里是jsfiddle工作http://jsfiddle.net/j08691/TgFvP/15/，页面我没有看到效果http://www.tailwatersflyfishing.com/sage-fly-rods

我是超级新人，所以我确信这是我缺少的标准。有什么建议吗？

谢谢！

Answer 1

jQuery脚本应该包含在

中

$(function() {
...
...
}

因为只有在DOM准备就绪时才需要执行jQuery函数。

Answer 2

您对该代码段的问题尤其在于您错过了});块的结束$(document).ready();

<script type="text/javascript">
$('document').ready(function(){

    $('.rod-list').hover(function(){
       $('.rod-list', this).slideToggle('fast');
    }, function() {
       $('.rod-list', this).slideToggle('fast');
    });
// Add }); here!
</script>

然而，对您来说更大的问题是您还在页面中包含PrototypeJS，它会覆盖$本身作为自己特殊的东西;所以，即使你修复了<script>，你也会得到无法调用方法'准备'的空错误。

要修复此，您需要使用以下内容;

<script type="text/javascript">
jQuery('document').ready(function($){

    $('.rod-list').hover(function(){
       $('.rod-list', this).slideToggle('fast');
    }, function() {
       $('.rod-list', this).slideToggle('fast');
    });

});
</script>

这使用了未被Prototype覆盖的jQuery()，因此仍然有效。在准备好的处理程序中，我们然后传递$以便在就绪处理程序中，您可以使用$作为jQuery 的便捷别名，但在准备好之外处理程序，$将是Prototype 。

Answer 3

您的脚本无法正常运行，因为您收到的错误会阻止所有内容完全加载。您需要打开控制台才能看到它们。我开始的第一个地方是w3c validator，以确保您的标记是干净的（目前存在验证问题）。

Answer 4

如果你运行firebug或其他开发人员工具套件，你会发现你错过了一个大括号。

你在网站上有这个...

$('document').ready(function(){
    $('.rod-list').hover(function() {
        $('.rod-list', this).slideToggle('fast');
    }, function() {
        $('.rod-list', this).slideToggle('fast');
});

你需要的是......

$('document').ready(function(){
    $('.rod-list').hover(function() {
        $('.rod-list', this).slideToggle('fast');
    }, function() {
        $('.rod-list', this).slideToggle('fast');
    });
});

Answer 5

这是您需要的准备好的代码：

$(function () {
    $('.rod-list').hover(function () {
        $('.rod-list', this).slideToggle('fast');
    }, function () {
        $('.rod-list', this).slideToggle('fast');
    });
});

看起来页面可能还有其他错误。

旁注：

$(function () {

是：

的快捷方式

$(document).ready(function() {

jQuery脚本没有执行，但它们在jsfiddle中工作

5 个答案: