[object Object]和[object HtmlDivElement]的区别是什么？如何使用jQuery操作Div元素？

Question

我正在使用类似单选按钮的div，并有一个问题。

我声明了一个函数和变量，如下所示：

我设置了两种样式，.buttonUp和.buttonDown，将在div的onclick事件上应用。

<script type="text/javascript">
var onCheck;

function setRadio(param_ElementRef) 
{
    if (param_ElementRef != onCheck) 
    {
        if (onCheck) 
        {
            onCheck.className = 'buttonUp';
        }
        param_ElementRef.className = 'buttonDown';
        onCheck = param_ElementRef;
    }
}
</script>

我在 div 中这样调用一个函数。

<div id="Yes" class="buttonUp" onclick="setRadio(this)">Yes</div>
<div id="No" class="buttonUp" onclick="setRadio(this)">No</div>
<div id="Maybe" class="buttonUp" onclick="setRadio(this)">Maybe</div>

这个可以正常工作，但是我无法设置onCheck变量的默认值。

我尝试给div分配id，但是当我alert($('#Yes')时，它显示[object Object]，而如果我alert(param_ElementRef)，它会显示[object HtmlDivElement]。

显然两者之间存在差异，有没有一种方法通过id引用或类似方式返回相同的对象？

非常感谢。

- WonderWorker

---

alert($('#Yes') 显示 [object Object] 的原因是它是一个 jQuery 对象。另一方面，如果你想要返回 [object HtmlDivElement]，请尝试使用 alert(document.getElementById('Yes')) 而不是 alert($('#Yes')。 - Clyde Lobo

哇！太棒了！谢谢。我一直以为 $ 和 document.getElementbyId 是一样的东西。我错了！谢谢！ - WonderWorker

将评论发布为答案，并添加更多内容。 - Clyde Lobo

如果你想将[object HtmlDivElement]或其他HTML元素转换为JQuery使用的[object Object]元素，可以在变量周围包裹$()，例如$(myHtmlVariable)。 - Jan

Answer 1

当你使用alert($('#Yes'))时，会显示[object Object]的原因是因为它是一个jQuery对象。

相反，如果你想返回[object HtmlDivElement]，请尝试使用alert(document.getElementById('Yes'))而不是alert($('#Yes'))

你也可以通过使用get()从jQuery对象中获取纯js对象。

例如，alert($('#Yes'))显示[object Object]，如果你尝试alert($('#Yes').get(0))，你将得到[object HtmlDivElement]

- Clyde Lobo

Answer 2

给选项的div添加额外的class。

<div id="yes" class="button buttonUp">Yes</div>
<div id="no" class="button buttonUp">No</div>
<div id="maybe" class="button buttonUp">Maybe</div>

这里是选择选项的jQuery代码。

var option;
$('.button').click(function() {
    option = $(this).attr('id');
    $('.selected').html('Your option - ' + option);
    $(this).addClass('buttonDown').removeClass('buttonUp');
});​

请查看jsFiddle中的示例代码http://jsfiddle.net/prasofty/zWjjk/

- prasannaboga