jQuery nicht abgefangenen Referenzfehler $ foo ist nicht definiert

Question

Ich versuche einzelne divs auf Klick mit jQuery im Laravel Spark-Framework zu erweitern und zu reduzieren. Mein Code stammt hauptsächlich aus der Antwort auf this question.

Wenn der SelectShow-Text angeklickt wird, funktioniert die Warnung gut, aber die Konsole zeigt diesen Fehler "Uncaught ReferenceError: $ selectShow ist nicht definiert". Selbst wenn ich den genauen Code von dem angegebenen Link verwende, erhalte ich den Fehler. Eine Schnellsuche erwähnt, dass jQuery als erstes geladen werden muss, aber ich habe diese Funktion bereits in den Funktionsblock Dokument bereit gestellt. Außerdem funktioniert die Warnung gut (wie auch andere jQuery-Funktionen, die ich verwende), weshalb ich nicht denke, dass dies ein Problem beim unpassenden Laden von jQuery ist.

Es gibt wahrscheinlich eine einfache Antwort, aber ich bin ratlos. Vielen Dank.

Code:

<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

Sie sind Code arbeiten können, wie sie ist, aber Sie können Probleme mit globalen Namenskollision laufen und Ihre $selectShow endet überschrieben werden.

So lösen Sie das, deklarieren Sie lokale Variablen mit var. Dann werden sie den globalen Raum nicht verschmutzen, und Sie können vermeiden, eine Kollision mit anderen Verwendungen der Variablen zu benennen.

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