jQuery的這是行不通

Question

我有我的jQuery代碼的一個問題：

<ul class="category-titles"> 
    <li><a id="category-title" href="">Test</a> 
    </li> 
    <li><a id="category-title" href="">Test 2</a> 
    </li> 
    <li><a id="category-title" href="">Test 3</a> 
    </li> 
</ul> 

<div class="toolbar"> 
    <h1 id="results-title">Test</h1> 
</div> 

$('.category-titles > li > a').mouseover(function() { 
    var strTitle = $('.category-titles > li > a', this).text(); 
    $("#results-title").html(strTitle); 
    console.log(strTitle); 
}); 

這裏是一個鏈接：http://jsfiddle.net/irider89/Ltd1fp79/6/ 在鼠標輸入標題應該改名爲李冠軍。

Answer 1

由於您正在將事件綁定到錨點，因此this引用了錨點元素。因此，簡單地用

var strTitle = $(this).text(); 

，而不是

var strTitle = $('.category-titles > li > a',this).text(); 

DEMO

重要：ID是唯一的標識符

Answer 2

如果超過.category-titles > li > a元素捕捉mouseover事件，然後this指這些選定的元素。只需使用$(this).text()即可獲取懸停元素的文字。

DEMO：http://jsfiddle.net/Ltd1fp79/7/

Answer 3

只是引用$(this)，而不是：

$('.category-titles > li > a').mouseover(function(){ 
    var strTitle = $('.category-titles > li > a',this).text(); 
    $("#results-title").html(strTitle); 
    console.log(strTitle); 
}); 

使用此：

$('.category-titles > li > a').mouseover(function(){ 
    var strTitle = $(this).text(); 
    $("#results-title").html(strTitle); 
    console.log(strTitle); 
}); 

Answer 4

改變這一行：

var strTitle = $('.category-titles > li > a',this).text(); 

這樣：

var strTitle = $(this).text(); 

因爲你的事件已綁定到'.category-titles > li > a'，this是指觸發事件的鏈接。