jQuery:错误：$（“div.close”为空

对于jQuery专家来说，这可能是一个快速的解决方案。我已经写了自己的动画/弹出脚本。但是在我的页面中实现它时，我得到了一个错误-

错误：$（“#boxWrapper.close”）为空

你知道为什么吗

我的完整代码如下：

干杯

去掉JS部分中的

标记。这些都是语法错误。您的JS代码将由JSFIDLE自己可爱地放置在适当的设置中

还可以去掉复制到HTML部分的

块

然后，您需要定义“panel1”变量

而且，所有这些标记（joomla？）在JSFIDLE中根本不会起任何作用

编辑-鉴于所有这些问题都源于对JSFIDLE的工作方式缺乏了解，因此这些问题都不可能是您的实际问题。现在你知道了。无论如何，最有可能的问题是，您试图在jQuery出现在页面上之前使用它。但是，如果看不到真正的代码，很难说。

去掉JS部分中的

标记。这些都是语法错误。您的JS代码将由JSFIDLE自己可爱地放置在适当的设置中

还可以去掉复制到HTML部分的

块

然后，您需要定义“panel1”变量

而且，所有这些标记（joomla？）在JSFIDLE中根本不会起任何作用

---

编辑-鉴于所有这些问题都源于对JSFIDLE的工作方式缺乏了解，因此这些问题都不可能是您的实际问题。现在你知道了。无论如何，最有可能的问题是，您试图在jQuery出现在页面上之前使用它。但是，如果看不到真正的代码，很难说。

有标记问题，我认为选择器不是最好的选择

---

有标记问题，我认为选择器不是最好的选择

就是一个有效的例子

 $(document).ready(function() {
    $('#boxWrapper .close').css({"opacity": "0.0"});
    var panel1 =true;
        $('#boxWrapper .button').click(
        function() {

            if (panel1) {
                $('#boxWrapper .open').animate({"opacity": "0.0"}, "slow");
                $('#boxWrapper .close').animate({"opacity": "1.0"}, "slow");
                $('#boxWrapper').animate({"left": "-=200px"}, "slow", function() {panel1 = false;});
            }
            else {
                $('#boxWrapper .open').animate({"opacity": "1.0"}, "slow");
                $('#boxWrapper .close').animate({"opacity": "0.0"}, "slow");
                $('#boxWrapper').animate({"left": "+=200px"}, "slow", function() {panel1 = true;});
        }
        }
        );    
        });

这是一个有效的例子

 $(document).ready(function() {
    $('#boxWrapper .close').css({"opacity": "0.0"});
    var panel1 =true;
        $('#boxWrapper .button').click(
        function() {

            if (panel1) {
                $('#boxWrapper .open').animate({"opacity": "0.0"}, "slow");
                $('#boxWrapper .close').animate({"opacity": "1.0"}, "slow");
                $('#boxWrapper').animate({"left": "-=200px"}, "slow", function() {panel1 = false;});
            }
            else {
                $('#boxWrapper .open').animate({"opacity": "1.0"}, "slow");
                $('#boxWrapper .close').animate({"opacity": "0.0"}, "slow");
                $('#boxWrapper').animate({"left": "+=200px"}, "slow", function() {panel1 = true;});
        }
        }
        );    
        });

---

没错，伙计们。感谢您的回答，很抱歉jFiddle使用不当。但我觉得它确实需要包括Joomla，因为这实际上是主要问题

Joomla还使用Mootools的JSLibrary

所以我需要设置一个noconflict（）；对于jQuery。并将$的所有引用更改为jQuery

代码的实际答案是用jQuery替换所有$reference

jQuery(document).ready(function() {
    jQuery('#boxwrapper .close').css({"opacity": "0.0"});
    var panel1 =true;
        jQuery('#boxwrapper .button').click(
        function() {

            if (panel1) {
                jQuery('#boxwrapper .open').animate({"opacity": "0.0"}, "slow");
                jQuery('#boxwrapper .close').animate({"opacity": "1.0"}, "slow");
                jQuery('#boxwrapper').animate({"left": "-=200px"}, "slow", function() {panel1 = false;});
            }
            else {
                jQuery('#boxwrapper .open').animate({"opacity": "1.0"}, "slow");
                jQuery('#boxwrapper .close').animate({"opacity": "0.0"}, "slow");
                jQuery('#boxwrapper').animate({"left": "+=200px"}, "slow", function() {panel1 = true;});
     }
   }
 );    
});

---

没错，伙计们。感谢您的回答，很抱歉jFiddle使用不当。但我觉得它确实需要包括Joomla，因为这实际上是主要问题

Joomla还使用Mootools的JSLibrary

所以我需要设置一个noconflict（）；对于jQuery。并将$的所有引用更改为jQuery

代码的实际答案是用jQuery替换所有$reference

jQuery(document).ready(function() {
    jQuery('#boxwrapper .close').css({"opacity": "0.0"});
    var panel1 =true;
        jQuery('#boxwrapper .button').click(
        function() {

            if (panel1) {
                jQuery('#boxwrapper .open').animate({"opacity": "0.0"}, "slow");
                jQuery('#boxwrapper .close').animate({"opacity": "1.0"}, "slow");
                jQuery('#boxwrapper').animate({"left": "-=200px"}, "slow", function() {panel1 = false;});
            }
            else {
                jQuery('#boxwrapper .open').animate({"opacity": "1.0"}, "slow");
                jQuery('#boxwrapper .close').animate({"opacity": "0.0"}, "slow");
                jQuery('#boxwrapper').animate({"left": "+=200px"}, "slow", function() {panel1 = true;});
     }
   }
 );    
});

---

---

如果您启动

$（document）.ready（function（）{//place your code}）

？如果您将

joomla

代码放入JSFIDLE，没有人可以测试JSFIDLE是否不会抛出此错误。您至少应该正确填写字段。例如，在JavaScript字段中，不应在代码周围放置

标记。并且

不是有效的HTML标记。请创建一个有效的小提琴来演示问题。您在HTML窗口中有一个脚本标记，然后在Javascript窗口中有相同的脚本。从HTML中删除脚本，并删除Javascript窗口中代码周围的脚本标记。@StuBlackett-jsfiddle与pastebin不同-您应该使用它来实际制作一个工作示例，演示您想要回答的问题或谜团。如果你把

joomla

代码放进jsfiddle，没有人能测试jsfiddle没有抛出这个错误。您至少应该正确填写字段。例如，在JavaScript字段中，不应在代码周围放置

标记。并且

不是有效的HTML标记。请创建一个有效的小提琴来演示问题。您在HTML窗口中有一个脚本标记，然后在Javascript窗口中有相同的脚本。从HTML中删除脚本，并删除Javascript窗口中代码周围的脚本标记。@StuBlackett-jsfiddle与pastebin不同-您应该使用它来实际制作一个工作示例，演示您想要回答的问题或谜团。只在那里转储这样的代码肯定不会起作用，因为JSFIDLE后端不会像您自己的服务器那样评估这些标记。我将删除Joomla标记。他的JS代码非常完美，我在[jslint]（jslint.com）上检查过。但是，是的，JS不应该放在JSFIDLE中的html部分。从JSFIDLE中删除了脚本。我将删除Joomla标记。他的JS代码非常完美，我在[jslint]（jslint.com）上进行了检查。但是，是的，JS不应该放在jsfiddleCheers Kim的html部分，我现在得到错误：$（文档）。ready不是一个函数，您需要在script@Kim我将代码放在头部，直接放在jQuery之后。还是给了我那个错误。@Kim-看起来像是Joomla冲突错误，因为它也加载了工具。因此，我在代码中添加了jQuery的noconflict。但是我再次从原始代码中得到错误。我不知道发生了什么，但它似乎是Joomla错误，而不是jquery，所以我帮不了你：/Cheers Kim，我现在得到错误：$（文档）。ready不是一个函数，你需要在script@Kim我将代码放在头部，直接放在jQuery之后。还是给了我那个错误。@Kim-看起来像是Joomla冲突错误，因为它也加载了工具。因此，我在代码中添加了jQuery的noconflict。但是我又一次从原始代码中得到了错误。我不知道发生了什么，但这似乎是一个错误