jQuery未捕获的参考错误$ foo未定义

我试图在Laravel Spark框架上使用jQuery进行单击时展开和折叠单个div。我的代码主要来自this question的答案。

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

});

来源

2016-06-30 HannahHunt

也许你想用'var'声明'$ selectShow'和'$ media'？也许他们被其他代码覆盖，因为他们不在本地范围内。 –

@ AlexanderO'Mara代码按预期工作。 –

@ AlexanderO'Mara谢谢！我用var声明了它们，现在代码可以像它应该的那样工作（或多或少）。如果您发表评论作为答案，我会接受它。 – HannahHunt

你的代码可以作为 - 是的，但你可能正在运行与全局名称冲突的问题，您$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-30 16:54:40

jQuery未捕获的参考错误$ foo未定义

回答

相关问题