document.getElementById（'id'）問題

Question

鄉親們

我的網頁（ http://playdota.thilisar.cz ）上有一個JavaScript文件（下面的代碼），該文件必須具有對圖標邊緣進行修飾的效果（實際上，它必須加載新圖片）並加載鼠標懸停事件時，將信息（到目前為止只有純文本）放入ID為“ info”的div中；鼠標懸停事件時，它必須將原始圖片加載到相同位置。 但是它只寫信息，並用“ [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的回答致以誠摯的謝意

謝謝所有試圖幫助我的人。

---

Answer 1

您正在將元素的innerHTML設置為jquery對象的返回值。 實際上，您是說將此函數的'toString'值作為HTML的內容。

你是說有？ 除非我讀錯了。 document.getElementById（'ses'）。innerHTML = $（function（）{

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的第二個參數.prop ，您可以直接使用DOM元素狀態計算屬性的值。

另外，您可能想使用jQuery清理過的“ mouseenter”和“ mouseleave”，並且比“ mouseover”和“ mouseout”更可靠。

編輯 —哇，我只是“縮小”了，發現所有這些代碼都被設置為innerHTML值，這沒有任何意義。 看起來像是猖copy的復制/粘貼之類的情況。

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

});