Question

我有多个div来展示我曾经参与过的一些项目（让我们调用每个div的类项目）。当项目悬停在（Jquery的MouseOver）时，包含在其中的div（允许调用此类型 githublink 的每个类），其中包含指向GitHub帐户的链接以及该相应项目的网站链接对于mouseleave和fadeout，淡入，反之亦然。设计的行为与我期望它的反应完全一样，但是当我将鼠标悬停在五个项目div中的任何一个上时，最后一个项目div的githublink始终是淡入淡出的。我的结论是，这是因为我使用for循环来分配mouseOver和MouseLeave事件。我只会包含这个特定的javascript代码而不是HTML代码，因为我调试了javascript代码并查看了Chrome Dev Tools，发现在for循环的每次迭代之后，正在检索和分配正确的元素，但是for循环完成所有eventhandler影响最后一个GitHubDiv。
以下是我的JS代码

var numprojects=document.getElementsByClassName("project");
    console.log(numprojects.length);
if(numprojects){
    for(i=0; i<=numprojects.length-1; i++){
        console.log(i);
        currentclass=".project:eq("+i+")";
        currentgithublink=".githublink:eq("+i+")";
        if($(currentclass)){
            $(currentclass).mouseover(function(){
                $(currentgithublink).fadeIn("fast","linear");
            })
            $(currentclass).mouseleave(function(){
                $(currentgithublink).fadeOut("fast","linear");

            })
        }
    }
}

如何使用for循环重写相同的代码以节省空间，但同时避免此问题。我认为它与匿名函数有关，但最重要的是为什么以及如何解决它。

**更新在阅读了关闭后，我更新了我的代码以执行以下操作，现在根本没有为任何项目触发事件。 **

if(numprojects){
    console.log("entered projects");
    for(i=0; i<=numprojects.length-1; i++){
        console.log("entered loop");
        mouse[i]=".project:eq("+i+")";
        currentgithublink[i]=".githublink:eq("+i+")";

        $(mouse[i]).mouseover=(function(index){
            return function(){
                $(currentgithublink[i]).fadeIn("fast","linear");
            }

        })

        $(mouse[i]).mouseleave=(function(index){
            return function(){
                $(currentgithublink[i]).fadeOut("fast","linear");
            }

        })

    }
}

2ND UPDATE 尝试了另一种方法......仍然无法弄清楚为什么这不会起作用

    var currentclass=[];
    mouseover=[];
    mouseleave=[];

if(numprojects){
    for(i=0; i<=numprojects.length-1; i++){
        currentclass[i]=".project:eq("+i+")";
        mouseover[i]=getFadeIn(i);
        mouseleave[i]=getFadeOut(i);
        $(currentclass[i]).mouseover=mouseover[i];
        $(currentclass[i]).mouseleave=mouseleave[i];

    }


}   

function getFadeIn(i){
    currentgithublink=".githublink:eq("+i+")";
        return function(){
            $(currentgithublink).fadeIn("fast","linear");
        }
}
function getFadeOut(i){
    currentgithublink=".githublink:eq("+i+")";
        return function(){
            $(currentgithublink).fadeOut("fast","linear");
        }
}

事件处理程序在for循环中调用匿名函数，但事件处理程序仅附加到最后一个元素

0 个答案: