jquery - this.id 到底是什么？

Question

当我发现时，我正在使用 JQuery 对 DIV 进行一些动态效果
this.id 的返回值因函数而异。

我有两组简单的父子 DIV 标签，如下所示:

        <DIV ID="row">
        <DIV ID="c1">              
        <Input type="radio" name="testing" id="testing" VALUE="1">testing1
        </DIV>
        </DIV> 
        <DIV ID="row">
        <DIV ID="c2">              
        <Input type="radio" name="testing" id="testing" VALUE="2">testing2
        </DIV>
        </DIV> 

代码1。

$('#row DIV').mouseover(function(){ 
radio_btns.each(function() {
$('#row DIV).addClass('testing');  // worked
});
});

代码2。

$('#row DIV').mouseover(function(){ 
var childDivID = this.id;
radio_btns.each(function() {
$('#'+childDivID).parent('DIV').addClass('testing');  // didn't work
});
});

我不明白为什么只有第一个代码可以工作
并突出显示所有“行”DIV，
但第二个代码未能做到这一点？

Answer 1

首先，您多次使用相同的 ID，这会导致各种奇怪的行为，因为它是无效的 HTML。

纠正此问题后，对于第二个代码示例，您需要进行调整以突出显示悬停时的当前行(注意 .row 现在是一个类以消除 ID 问题)，like this :

$('.row div').mouseover(function(){
    $('#'+this.id).parent('div').addClass('testing');
});​

但是，有一种更好的方法可以解决此问题，因为您已经拥有对该对象的引用 like this :

$('.row div').mouseover(function(){
    $(this).addClass('testing');
});​

一般来说，如果您有 this，我想不出您想要使用 $("#"+this.id) 的情况，应该是 $(this) 来获取你想要的 jQuery 对象。

还有一个项目，实际上是在问题之外，如果您想在这种情况下悬停，请使用 .hover()和 .toggleClass() , like this :

$('.row div').hover(function(){
    $(this).toggleClass('testing');
});​