Question

我想将mouseover和mouseout函数添加到系列类中。所以我在循环中使用带有变量的JQ选择器：

for(i=1;i<=2;i++){
    cid='.Cid'+i;
    ccid='.CCid'+i;
    csid='.CSid'+i;     
    $(cid).mouseover(function(){
    $(ccid).addClass("RelatedMainComment");
    $(csid).addClass("RelatedMainComment");
    });
    $(cid).mouseout(function(){
        $(ccid).removeClass("RelatedMainComment");
        $(csid).removeClass("RelatedMainComment");
    });
    }

但它没有正确运行，它似乎添加了最后一个类，在示例中它是类“Cid2”，鼠标悬停和鼠标输出功能。所以我又做了一个实验：

i=1;
    cid='.Cid'+i;
    ccid='.CCid'+i;
    csid='.CSid'+i;     
    $(cid).mouseover(function(){
    $(ccid).addClass("RelatedMainComment");
    $(csid).addClass("RelatedMainComment");
    });
    $(cid).mouseout(function(){
        $(ccid).removeClass("RelatedMainComment");
        $(csid).removeClass("RelatedMainComment");
    });
    i=2;

它的结果与前者相同。此外，如果代码是：

        for(i=2;i>=1;i--){
    cid='.Cid'+i;
    ccid='.CCid'+i;
    csid='.CSid'+i;     
    $(".Cid"+i).mouseover(function(){
    $(".CCid"+i).addClass("RelatedMainComment");
    $(".CSid"+i).addClass("RelatedMainComment");
    });
    $(".Cid"+i).mouseout(function(){
        $(".CCid"+i).removeClass("RelatedMainComment");
        $(".CSid"+i).removeClass("RelatedMainComment");
    });
    }

它无法正常工作。你能解释一下原因吗？

Answer 1

Javascript关闭！使用i作为参数的匿名函数：

for(i=1;i<=2;i++){
    (function(i) {
        cid='.Cid'+i;
        ccid='.CCid'+i;
        csid='.CSid'+i;     
        $(cid).mouseover(function(){
            $(ccid).addClass("RelatedMainComment");
            $(csid).addClass("RelatedMainComment");
        });
        $(cid).mouseout(function(){
            $(ccid).removeClass("RelatedMainComment");
            $(csid).removeClass("RelatedMainComment");
        });
    })(i)
}

Answer 2

变量ccid仅在鼠标悬停$(ccid).addClass("RelatedMainComment");时在语句$(cid)中使用。

到那时，ccid的值不再是'.CCid'+i，而是已成为'.CCid2'，因此它无法正常运行。

要使函数中的变量ccid保持为'.CCid'+i，一种解决方案是使用event.data。

使用带有一些变量标识符的JQ选择器的奇怪现象

2 个答案: