document.getElementById（'id'）问题

Question

人，

我的页面（http://playdota.thilisar.cz）上有一个JavaScript文件（下面的代码），它必须具有修饰图标边缘的效果（实际上，它必须加载新图片）并加载到鼠标悬停事件时，信息（目前为止只有纯文本）到ID为“info”的div;在mouseout事件中，它必须将原始图片加载到相同位置。但它只会写入信息并用“[object Object]”文本替换图标。

我希望你理解这一点，因为我的英语不是很好。

感谢您的回答。

function showInfo(id){                     //Using jQuery 1.7.2
  document.getElementById('ses').innerHTML=$(function(){
    $.ajax({
        url: "sentinel_str/"+id+"-info.html"
    }).done(function(data){
        $("#info").html(data)
    })
    $("#ses").find("li").mouseover(function(){
        $id=$(this).find("img").attr("id")
        $(self.document[$id].src='look/icons/'+$id+'_hover.jpg')
    })
    $("#ses").find("li").mouseout(function(){
        $id=$(this).find("img").attr("id")
        $(self.document[$id].src='look/icons/'+$id+'.jpg')
    })
})};

感谢CHEESEWARLOCK's ANSWER

谢谢大家，他们试图帮助我。

---

Answer 1

您正在将元素的innerHTML设置为jquery对象的返回值。实际上你说的是把这个函数的'toString'值作为HTML的内容。

你的意思是？除非我读错了。 的document.getElementById（ 'SES'）。innerHTML的= $（函数（）{

Answer 2

“mouseover”和“mouseout”处理程序看起来很困惑。根本不需要致电getElementById();你正在使用jQuery，你可以找到<img>标签。一旦你找到它们，你就找到了它们;无需再找到它们。

$("#ses").find("li").mouseover(function(){
    $(this).find('img').prop('src', function() {
      return 'look/icons/' + this.id + '_hover.jpg';
    });
})
$("#ses").find("li").mouseout(function(){
    $(this).find('img').prop('src', function() {
      return 'look/icons/' + this.id + '.jpg';
    });
})

将函数作为.prop的第二个参数传递，可以直接使用DOM元素状态计算属性的值。

你也可以使用“mouseenter”和“mouseleave”，它们被jQuery消毒，比“mouseover”和“mouseout”更可靠。

编辑 - 哇我只是“缩小”并注意到所有这些代码都被设置为innerHTML值，这没有任何意义。看起来像一个猖獗的复制/粘贴或其他东西。

Answer 3

您正在获取[object Object]，因为您正在将HTML元素的内容设置为jQuery对象。如果你想调用一段jQuery代码，你不需要将它包装在$()中。您可以直接调用代码。所以摆脱这条线：

document.getElementById('ses').innerHTML=$(function(){

和这一行：

}) 

，当您致电showInfo(id)时，将执行其余代码。

Answer 4

下面写的代码可以解决您的问题甚至很短。检查一下。

var id;
$('#ses').find('li').each(function(){
   $(this).mouseover(function(){
    var image=$(this).find('img');
      id=$(this).find('img').attr('id');
     $('#id').hide();
$(this).append('<div>'+id+'</div>');
});
$(this).mouseout(function(){
$(this).html('');
$('#id').show();
});

});