javascript - 使用动态 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) 影响按类选择的元素将正常工作.如果您需要多个绑定(bind)到一个组，您应该查看 .each http://api.jquery.com/each/

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