0

うまくいけば、私はこれを明確にし、私の主張を理解することができます. 私はいくつかの検索を行いましたが、実際にヒットするものは何もありません。

JSfiddle ページ: JS Fiddleまた、一部の CSS は適切な画像ではないため、サイズが正しくありません。

しかし、ここにJavascriptコードがあります：

 //mouse over
for(var i = 0; i<10; i++){
    $("#client"+i).on("mouseover", function(){
        $(this).removeClass("clientsOff").addClass("clientsOn");
        for(var e = 0; e < 10; e++){
            (function(){
                $("#overlayC"+e).css({'display':'block'});
                })();
            };
        });
    };

  //mouse leave 
for(var i = 0; i<10; i++){
    $("#client"+i).on("mouseleave", function(){
        $(this).removeClass("clientsOn").addClass("clientsOff");
        (function(){
            for(var e = 0; e<10; e++){
                $("#overlayC"+e).css({'display':'none'})
            }})();
        });
    };

わかりました、ポイントに。ここでは、2 つのホバー アクティビティが実行されます。そのうちの 1 つ (正しく動作している) は、ホバーするたびにクラスを切り替え、一度に 1 つずつ実行するだけです。

2 つ目は別のホバー効果ですが、一度に 1 つずつ行うのではなく、すべての効果が表示されます。

これを修正する最も簡単な方法は、各 ID にホバーすることですが、それには永遠に時間がかかります/あまり効率的ではありません。したがって、ここでループを使用する理由です。今、別の閉鎖が必要であることはわかっていますが、正しく機能していません。

これを行うためにいくつかの異なる方法を試しましたが、同じ結果がスローされるか、まったく機能しません。

はい、最初のループはすべて 1 つにすることもできますが、今のところ、物事を分離しておくのに役立つので、物事をよりよく読むことができます

4

3 に答える 3

1

これが編集されたjsFiddleです

$('[id*="client"]').each(function(){
    $(this).hover(function(){
        $(this).removeClass("clientsOff").addClass("clientsOn")
        .find('[id*="overlayC"]').eq(0).css({display:'block'});
    },function(){
        $(this).removeClass("clientsOn").addClass("clientsOff")
        .find('[id*="overlayC"]').eq(0).css({display:'none'});
    })
});

コードが頭にある場合は、 $(function(){//code}); を実行します。

于 2013-05-31T03:06:14.643 に答える
1

overlayCマウスオーバーごとにすべての s を表示しているようです

for(var i = 0; i<10; i++){
    (function(i){
        $("#client"+i).hover(function(){
            $(this).removeClass("clientsOff").addClass("clientsOn");
            $("#overlayC"+i).css({'display':'block'});
        }, function(){
            $(this).removeClass("clientsOn").addClass("clientsOff");
            $("#overlayC"+i).css({'display':'none'})
        });
    })(i);
};

デモ:フィドル

于 2013-05-31T02:56:12.860 に答える