使用动态jQuery选择器

Question

我是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"选择器,但是我发现的文档在回到我的场景时遇到了麻烦.

任何帮助表示赞赏,谢谢大家!

Answer 1

$('.navButton').hover(function(){
         $(this).animate({
                height: "150px"
            }, 500, "easeOutBounce");
},function(){
          $(this).animate({
                height: "120px"
            }, 500, "easeOutBounce")
});

jquery中的选择器与css选择器基本相同,因此按类选择将生成包含该类的所有元素的jquery对象.http://api.jquery.com/category/selectors/

当你应用一个jquery函数时,通常$(this)是指一个特定的元素而不是整个列表,所以使用$(this)来影响由类选择的元素将正常工作.我需要多个绑定到一个组,你应该查看.each http://api.jquery.com/each/

我在这里使用.hover这是mouseenter和mouseleave的简写http://api.jquery.com/hover/