jQuery 未捕获的引用错误 $foo 未定义答案

【问题标题】：jQuery uncaught reference error $foo is not definedjQuery 未捕获的引用错误 $foo 未定义
【发布时间】：2016-06-30 16:45:54
【问题描述】：

我正在尝试在 Laravel Spark 框架上使用 jQuery 展开和折叠单个 div。我的代码主要来自this question的答案。

当单击 selectShow 文本时，警报工作正常，但控制台显示此错误“未捕获的 ReferenceError：$selectShow 未定义”。即使我使用我提供的链接中的确切代码，我也会收到错误消息。快速搜索提到需要首先加载 jQuery，但我已经将此功能放置在文档就绪功能块中。此外，警报工作正常（就像我正在使用的其他 jQuery 函数一样），这就是为什么我不认为这是不正确加载 jQuery 的问题。

这可能有一个简单的答案，但我不知所措。谢谢。

代码：

<div class="mediaContainer">
    <div class="selectShow"><span>Show Media</span></div>
    <div class="media">
        <img src="myurl.com" alt="Image unavailable">
    </div>
</div>


.mediaContainer {
    width:100%;
}
.mediaContainer div {
    width:100%;
}
.mediaContainer .selectShow {
    font-size: 12px;
    color: #0084B4;
    padding: 5px;
    cursor: pointer;
}
.mediaContainer .media {
    display: none;
}


$(".selectShow").click(function () {
    alert('Click!');
    $selectShow = $(this);
    $media = $selectShow.next();
    $(".media").not($media).slideUp().prev().text("Show Media");
    $media.slideToggle(500, function () {
        $selectShow.text(function () {
            return $media.is(":visible") ? "Hide Media" : "Show Media";
        });
    });

});

【问题讨论】：

也许您想用var 声明$selectShow 和$media？也许它们被其他代码覆盖，因为它们不是本地范围的。
@AlexanderO'Mara 代码按预期工作。
@AlexanderO'Mara 谢谢！我用 var 声明了它们，现在代码（或多或少）像预期的那样工作。如果您发表评论作为答案，我会接受。
@PraveenKumar 这就是我如此困惑的原因......我使用的代码在小提琴中运行良好，但在我的网站上却不行。我不知道为什么，但 Alexander 声明 vars 的想法帮助它发挥了作用。感谢您查看！

标签： javascript jquery laravel runtime-error laravel-spark

【解决方案1】：

您的代码可以按原样工作，但您可能会遇到全局名称冲突问题，并且您的 $selectShow 最终会被覆盖。

所以解决这个问题，用var 声明你的局部变量。这样它们就不会污染全局空间，并且可以避免与变量的其他用途发生命名冲突。

$(".selectShow").click(function () {
    alert('Click!');
    var $selectShow = $(this);
    var $media = $selectShow.next();
    $(".media").not($media).slideUp().prev().text("Show Media");
    $media.slideToggle(500, function () {
        $selectShow.text(function () {
            return $media.is(":visible") ? "Hide Media" : "Show Media";
        });
    });
});

【讨论】：