0

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

单击 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";
        });
    });

});
4

1 回答 1

0

您的代码可以按原样工作，但您可能会遇到全局名称冲突问题，$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";
        });
    });
});
于 2016-06-30T16:54:40.750 回答