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) を使用して、クラスによって選択された要素に影響を与えると正常に機能します. グループへの複数のバインドが必要な場合は、http://api.jquery.com/each/ をチェックして.each ください。

ここでは、mouseenter と mouseleave の短縮形である .hover を使用しています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

はandの.hover()短縮形であるため、コードを次のように要約できます。mouseentermouseleave

$(".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 に答える