jQuery uncaught 참조 오류 $ foo가 정의되지 않았습니다.

Question

Laravel Spark 프레임 워크에서 jQuery를 사용하여 클릭 할 때 단일 div를 확장 및 축소하려고합니다. 내 코드는 주로 this question의 대답에서 나옵니다.

selectShow 텍스트를 클릭하면 경고가 제대로 작동하지만 콘솔에 "Uncaught 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"; 
     }); 
    }); 

}); 

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