使用动态 jQuery 选择器答案

【问题标题】：Using dynamic jQuery selectors使用动态 jQuery 选择器
【发布时间】：2012-12-03 21:36:39
【问题描述】：

我对 jQuery 还很陌生，想摆脱使用显式选择器并以这种方式混淆我的代码。我尝试了一些不同的方法，但没有成功让我的选择器在多个元素上动态运行，而没有每个元素的 sn-p 代码。

我的脚本简单如下：

     <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”选择器，但我发现的文档无法与我的场景相关联。

感谢大家的帮助，谢谢！

【问题讨论】：

@Fresheyeball - 嗨，谢谢，这似乎效果最好，对我来说也是最容易理解的。现在，为了进一步完善我的代码，我想在 div 中添加一些链接文本，并对其进行动画处理（尽管分开） - 我将如何引用我拥有的
标签（它们是我的子divs。我已经尝试了一些东西，我可以让它同时为每个

中的所有
设置动画，但显然这不是我想要的......我的代码只是 <a><div><p></p></div></a> 基本上每个选项卡我有，每个都需要单独制作动画。所有内容都已分类和 Id-ed.. 再次感谢！

标签： javascript jquery html this css-selectors

【解决方案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) 来影响类选择的元素会正常工作。我需要多个绑定到一个组，你应该查看.eachhttp://api.jquery.com/each/

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

【讨论】：

您好，谢谢，这似乎效果最好，对我来说也是最容易理解的。现在，为了进一步完善我的代码，我想在 div 中添加一些链接文本，并对其进行动画处理（尽管分开） - 我将如何引用我拥有的
标签（它们是我的子divs。我已经尝试了一些东西，我可以让它同时为每个

中的所有
设置动画，但显然这不是我想要的......我的 HTML 看起来像这样：
如果我的答案对你有用，请点击我的答案旁边的复选标记。要引用子 p 标签，请尝试 .children 函数。 $(this).children('p').animate

【解决方案2】：

试试这样的：

<script type = "text/javascript" > 
    $(document).ready(function() {
        $('.navButton').on('mouseenter mouseleave', function(e) {
            $(this).animate({
                height: e.type == "mouseenter" ? 150 : 120
            }, 500, "easeOutBounce")
        });
    });
</script>

【讨论】：

【解决方案3】：

像这样改变你的脚本：

 <script type="text/javascript">
    $(document).ready(function() {
        var $navItems = $('.navitem');

        $navitems.each( function(){
            $(this).mouseenter(function(){

                $(this).animate({
                    height: "150px"
                }, 500, "easeOutBounce")
            })

            $(this).mouseleave(function(){

                $(this).animate({
                    height: "120px"
                }, 500, "easeOutBounce")
        });
    })
</script>

和这样的html

<div class="navWrap">

     <div id="navItem" class="navButton blue"></div>
     <div id="navItem" class="navButton orange"></div>
     <div id="navItem" class="navButton green"></div>
     <div id="navItem" class="navButton red"></div>


</div>

【讨论】：

大家好，感谢您的回答...看起来每个人的代码贡献都很棒！感谢您的所有帮助。

【解决方案4】：

由于.hover() 是mouseenter 和mouseleave 的简写，您可以将代码压缩为：

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

【讨论】：

【解决方案5】：

试试这个代码：

 <script type="text/javascript">
        $(document).ready(function() {


            $("div[id^='navItem']").mouseenter(function(){

                $(this).animate({
                    height: "150px"
                }, 500, "easeOutBounce")
            })

            $("div[id^='navItem']").mouseleave(function(){

                $(this).animate({
                    height: "120px"
                }, 500, "easeOutBounce")
            })
    </script>

【讨论】：

选择器的使用效率非常低，老兄。