使用JavaScript/jQuery在鼠標懸停上顯示元素的ID

我一直想弄明白這一點，但我還沒有。使用JavaScript/jQuery在鼠標懸停上顯示元素的ID

我在錨定標記的html中構建列，我想知道將鼠標懸停在其上的那個ID。

它應該很簡單，但看起來像我碰壁了，我看不出如何解決這個問題。

我遇到的問題是，在控制檯上顯示的ID始終是數組的最後一個ID。而不是我想要的特定主播的ID。

任何建議都非常歡迎。

這裏是我的代碼：

//Anchor builder 
var numberOf = flatParamDateArray.length; 

for (i = 0; i < numberOf; i++) { 
    var param2Slider = document.createElement("a"); 
    param2Slider.id = 'sliderAnchor' + i; 
    sliderAnchorId = param2Slider.id; 
    param2Slider.name = 'param2Slider'; 
    param2Slider.className = 'nav2Slider a'; 
    document.getElementById('nav2Slider').appendChild(param2Slider); 
    $('.nav2Slider a').onmouseover = function() { 
     console.log('flatParamDateArray index: ' + param2Slider.id); 
    } 
}

來源

2013-02-07 Probandot

你的html是什麼？部分問題是在jQuery對象中使用純JavaScript事件。它看起來也比它所需要的複雜得多。 –

我正在使用這個與jQuery插件做一個動畫與圖像。我已經有一個錨點列可以與一個動畫一起工作。但用戶可以選擇兩個選擇兩個動畫，所以我實現了一個控制動畫的錨點列。這就是爲什麼我從'numberOf'創建錨點，這是來自一個動畫的圖片數量。我想使用鼠標懸停來調用對應於錨點ID的圖像。 – Probandot

這是如何告訴我你的html是什麼樣的，並顯示相關的代碼。這裏 –

移動這個出，並後for for循環：

$('.nav2Slider a').onmouseover = function() { console.log('flatParamDateArray index: '+param2Slider.id); }

2.更改onmouseover()到mouseover()：

$('.nav2Slider a').mouseover(function() { console.log('flatParamDateArray index: '+param2Slider.id); });

要獲得ID，這是你需要的代碼：

console.log('flatParamDateArray index: '+ $(this).prop('id'));

獎勵：

既然你正在動態添加鏈接，您應該使用.on()函數，以減少e （而不是每個元素）：

$('.nav2Slider').on('mouseover', 'a', function() { console.log('flatParamDateArray index: '+ $(this).prop('id')); });

來源

2013-02-07 10:11:07

請注意，即使沒有授權，也可以使用「on」。 '（「。」nav2Slider a「）。on（」mouseover「，function（）{...}）' –

是的，但存在性能問題，尤其是對於許多動態鏈接。看到這篇文章：[你的jquery-now-with-less-suck]（http://24ways.org/2011/your-jquery-now-with-less-suck/）>事件委託> [jquery-event-代表團]（http://jsperf.com/jquery-event-delegation） –

這個小提琴不測量實際觸發的事件的性能。增加它們的成本是IMO，可以忽略不計。我仍然同意，代表團往往是一個好主意。 –

你的變量param2Slider是全球和for循環變化對每個循環的價值。這意味着循環結束後param2Slider只包含最後一個值。

試試這個：

$('.nav2Slider a').on('onmouseover', function() { 
    console.log('flatParamDateArray index: ' + $(this).attr('id')); 
});

編輯：的onmouseover ......當然&你應該將這個片段圈外

來源

2013-02-07 10:10:44 AvL

AvL感謝您的回答，並解釋爲什麼我始終獲得相同的價值。我選擇塞繆爾的答案，因爲它有更多的細節，並幫助我更好地瞭解如何解決問題。它有.on獎勵:) – Probandot

這很公平，因爲他解釋得更好 - 並且首先付出了更多的關注;-) – AvL

使用JavaScript/jQuery在鼠標懸停上顯示元素的ID

回答

相關問題