0

Laravel Spark フレームワークで jQuery を使用して、クリック時に単一の div を展開および折りたたもうとしています。私のコードは、主にこの質問への回答から来ています。

selectShow テキストがクリックされると、アラートは正常に機能しますが、コンソールには「Uncaught ReferenceError: $selectShow is not defined」というエラーが表示されます。提供したリンクの正確なコードを使用しても、エラーが発生します。クイック検索では、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 に答える