我对 jQuery 还很陌生,想过去使用显式选择器并以这种方式混淆我的代码。我尝试了一些不同的方法,但没有成功让我的选择器在多个元素上动态运行,而没有每个元素的代码片段。
我的脚本如下:
<script type="text/javascript">
$(document).ready(function() {
$("#navItem").mouseenter(function(){
$(this).animate({
height: "150px"
}, 500, "easeOutBounce")
})
$("#navItem").mouseleave(function(){
$(this).animate({
height: "120px"
}, 500, "easeOutBounce")
})
</script>
还有我的 HTML ..
<div class="navWrap">
<div id="navItem" class="navButton blue"></div>
<div id="navItem2" class="navButton orange"></div>
<div id="navItem3" class="navButton green"></div>
<div id="navItem4" class="navButton red"></div>
</div>
我省略了脚本的其余部分,因为它是重复的(您在 HTML 中看到的其余 ID 的功能相同)。我的目标是能够动态选择悬停的“当前”元素,而不是显式引用每个 ID。我假设我需要使用“this”选择器,但是我发现的文档在与我的场景相关时遇到了麻烦。
任何帮助表示赞赏,谢谢大家!