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.id)的情况，如果你有this，那么获取jQuery对象应该是$(this)想。

在问题之外还有一件事，如果你想在这种情况下悬停，请使用.hover()和.toggleClass()，like this：

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

Answer 2

试试这个：

var childDivID = $(this).attr('id');

这到底是什么？

2 个答案: