javascript - Jquery循环通过onmouseover，有多个div

Question

好吧，希望我能阐明这一点并传达我的观点。我进行了一些搜索，但没有真正找到它。

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'})
            }})();
        });
    };

好了，进入正题。这里有两个悬停事件。其中之一(工作正常)只是切换类，每次悬停，一次一个。

现在，第二个是另一种悬停效果，但不是一次一个地显示所有效果。

现在解决这个问题的最简单方法是只为每个 id 悬停，但这将永远/效率不是很低。这就是为什么我在这里使用循环。现在，我知道它需要另一个关闭，但它无法正常工作。

我已经尝试了几种不同的方法来做到这一点，但它们要么抛出相同的结果，要么根本不起作用。

是的，起始循环可以是一个，但现在它有助于将事物分开，这样我可以更好地阅读事物

Answer 1

看起来您在每次鼠标悬停时都显示了所有 overlayC

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);
};

演示:Fiddle