Question

我有一个javascript代码如下：

$( "#hover0" )
    .mouseenter(function() {
        $( "#hover0" ).attr("style","background-color:#e1e8ed;");
    })
    .mouseleave(function() {
        $( "#hover0" ).removeAttr();
    });

完美无缺，但只要我将其更改为以下内容就不起作用：

var item=0;
$( "#hover"+item )
    .mouseenter(function() {
        $( "#hover"+item  ).attr("style","background-color:#e1e8ed;");
    })
    .mouseleave(function() {
        $( "#hover"+item  ).removeAttr();
    });

问题是什么？任何人都可以帮助我如何像第二种方法那样做到这一点吗？（实际上，真实场景是一个for循环，当每个循环通过时项目都会改变）

更新

这是我的循环：

for (var item in jsresult) {

    if (jsresult[item] != "null") {

    $('#tweetWrapper')
        .append("<div class='tweetCon' id='hover"+item+"' >" +
                "<div class='tweetimgcon' ><img alt='' height='50px' src='"+jsresult[item].url+"'></div>" +
                "<div class='tweetcontitle' >"+jsresult[item].name+"</div>" +
                "<div class='tweetcondate' >"+jsresult[item].date+"</div>" +
                "<div class='tweetconcontent' '>"+jsresult[item].text+"</div>" +
                "</div><div class='ttest' style='float:left;height:300px;width:100%;display:none;'></div>");

    $("#hover0")
      .mouseenter(function() {
        $( "#hover0" ).attr("style","background-color:#e1e8ed;");
      })
      .mouseleave(function() {
        $( "#hover0" ).removeAttr();
      });
    }
}

Answer 1

这些处理程序将始终使用item的最后已知值，而不是设置它时的值。

最好将处理程序代码移动到设置函数中，然后调用它 - 它的局部变量将始终具有正确的值。

function addHandlers(item) {
  $( "#hover"+item )
    .mouseenter(function() {
      $( "#hover"+item  ).attr("style","background-color:#e1e8ed;");
    })
    .mouseleave(function() {
      $( "#hover"+item  ).removeAttr('style');
    });
}

// called as...
//
for(var item in jsresult)
{     
  if (jsresult[item]!="null")
  {
    // wrappers, etc., then...
    //

    addHandlers( item );
  }
}

$（“＃hover”+ item）不起作用，但$（“＃hover0”）有效

1 个答案: