$("#hover"+item)不起作用，但是$("#hover0")的工作原理

$( "#hover"+item ) does not work but $( "#hover0" ) works

本文关键字：quot 工作 #hover0 但是 +item 不起作用 #hover      更新时间：2023-09-26

我有一个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();
      });
    }
}

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

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

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 );
  }
}
相关文章：