1

我对 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”选择器，但是我发现的文档在与我的场景相关时遇到了麻烦。

任何帮助表示赞赏，谢谢大家！

4

5 回答 5

5 
$('.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/的简写

于 2012-12-03T21:39:35.483 回答
1

尝试这样的事情：

<script type = "text/javascript" > 
    $(document).ready(function() {
        $('.navButton').on('mouseenter mouseleave', function(e) {
            $(this).animate({
                height: e.type == "mouseenter" ? 150 : 120
            }, 500, "easeOutBounce")
        });
    });
</script>​​​​​​​​​​​​​​
于 2012-12-03T21:41:53.610 回答
0

像这样更改您的脚本：

 <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>
于 2012-12-03T21:41:17.957 回答
0

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

$(".navWrap .navButton").hover(function() {
    $(this).animate({
        height: "150px"
    }, 500, "easeOutBounce")
}, function() {
    $(this).animate({
        height: "120px"
    }, 500, "easeOutBounce")
})​;
于 2012-12-03T21:41:31.817 回答
-1

试试这个代码：

 <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>
于 2012-12-03T21:40:02.180 回答