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是指触发事件的链接。