javascript - $( "#hover"+item ) 不起作用，但 $( "#hover0") 起作用

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