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

Question

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

的答案

单击 selectShow 文本时，警报工作正常，但控制台显示此错误 "Uncaught ReferenceError: $selectShow is not defined"。即使我使用我提供的 link 中的确切代码，我也会收到错误。快速搜索提到 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";
        });
    });

});

Answer 1

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

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

$(".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";
        });
    });
});

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

jQuery uncaught reference error $foo is not defined

javascript

jquery

runtime-error

laravel

laravel-spark