这个对象“未定义”答案

【问题标题】：This object "undefined"这个对象“未定义”
【发布时间】：2014-10-26 18:24:38
【问题描述】：

我试着环顾四周，似乎找不到相同的情况，所以这是我的问题：

谁能帮我解决这个简单的错误。 Jquery 不是我最强的套件，但我觉得这是我缺少的一些小东西。使用下面的代码，我得到错误“未定义”。

html:

<a href='#' ><img src= "./images/1.jpg"  width= '200px'  id="2" rel="arm1" onclick = 'test()' /></a>

jquery：

function test(){
    alert($(this).html());
};

我想要的是被点击的 img 标签的 HTML 代码。有没有其他方法可以做到这一点？

所以我尝试了以下方法，但效果不佳：我也将 onclick 添加到 ahref 标记。（错误：未定义）我尝试将“事件”作为参数传递。（错误声明“事件”未声明）尝试获取其 html() 时。

PS 我不想将 id 用作 onclick 函数！

任何帮助将不胜感激！

谢谢！

【问题讨论】：

表示test函数未定义或在全局范围内不可用。
test() 在 window 的上下文中调用，而不是在 img 元素的上下文中调用，因此 this 指的是 window。即使它引用img，那么html() 也会返回innerHtml 的innerHtml 元素，该元素始终为空。
@dfsq 嗯，它确实会弹出警报语句？所以它可以拿起测试功能。还有其他方法可以检索该元素的 html 吗？
@t.niese 感谢您的澄清！正如我在上面的评论中所说，是否有另一种方法来检索点击元素的 html？
ID 也不能以数字开头，或者只能是数字：css-tricks.com/ids-cannot-start-with-a-number

标签： jquery html undefined this

【解决方案1】：

好的，这就是你获取图像 HTML 的方法：

function test(obj) {
    alert($(obj).parent().html());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">
    <img src= "http://lorempixel.com/100/100" onclick="test(this)" width="200px" id="2" rel="arm1" />
</a>

如您所见，您可以将当前图像对象作为this 传递给单击处理程序。从那里你转到父元素 (a) 并读取它的 HTML 内容，这将是一个图像 HTML。

UPD. t.niese 在 cmets 中有一个关于 outerHTML 的观点，它有很好的支持，因此理想的代码如下所示：

alert(obj.outerHTML);

【讨论】：

因为 outerHTML 自 FF 11 起受支持，我将使用 $(obj)[0].outerHTML 因为如果 a 不仅包含 img 也可以使用
@t.niese 为什么不obj.outerHTML？
@t.niese 哈！我一直认为，outerHTML 在 IE 中没有得到很好的支持。我错了。谢谢，这里当然要用outerHTML。
@caeth 是的，你绝对是对的。这是漫长的一天：D
谢谢大家-我实际上并不知道outerHTML！我已经通过锚标签尝试了 .child() 路由，但我无法让它工作。但是谢谢你们都帮了很多忙！

【解决方案2】：

this 在您的test() 函数中引用Window。要访问单击的元素，请尝试以下操作：

HTML：

<element onclick='test(this)' />

JS：

function test(element){
    alert(element.innerHTML);
};

虽然点击 <img> 不会显示任何内容，因为它的 innerHTML 将为空。

编辑：正如 dsfq 所说，alert(element.outerHTML) 将向您显示图像的 HTML。

【讨论】：

在这种特殊情况下，element.parentNode.innerHTML 可以解决问题。当然还有outerHTML。
@dsfq 哦，没认真看问题，只是看着他的.html()+1