javascript - jQuery:如何将 "src"属性写入子元素的 Onclick 函数参数

Question

我正在使用 jQuery 重写 DOM，将无 JS HTML 页面转换为 JS 驱动页面。我在转换图像链接时遇到了故障。在原始代码中我有:

<div class="f">
   <a href="images/Fig-03-2.png" target="_blank">
      <img src="images/fig-03-2.png" alt="Fig 3.3" />
   </a>
</div>

...我想将其转换为:

<div class="f">
   <a>
      <img src="images/fig-03-2.png" alt="Fig 3.3" onclick="imagepop("fig-03-2.png")/>
   </a>
</div>

我不知道如何写 onclick属性，使其包含 img src值为imagepop的论点。我尝试过:

$(".f a").attr('onclick', 'imagepop(' + $(this).attr('src') + ')' );

...但是$(this).attr('src')返回“未定义”。

我应该如何修复我的代码行，或者阅读 img src 会更好吗？ imagepop 内部的属性功能？

**注意，我没有开发页面让每个 div 都有唯一的 ID，也不打算这样做。 <div> 内没有任何元素标签已分配有 ID。

Answer 1

...and I want to transform it into...

无论它的值(value)如何，我都不会。 相反，我会使用这样的函数:

$("div.f a img").click(function() {
    imagepop(this.src);
    return false;
});

那行是什么，可能包裹在 ready 中处理程序的作用是:如果用户单击图像，它会执行 imagepop 操作并取消该事件，这(除其他外)会阻止链接触发。

这称为渐进增强。支持 JavaScript 的用户代理将使用上述内容，而未启用 JavaScript 的用户代理仍将看到并点击该链接。请记住，用户代理不仅仅是浏览器，还包括爬虫、蜘蛛等，是的，还有禁用 JavaScript 的浏览器。

<小时/>

更新:如果您确实想在链接级别(这可能对键盘更友好)而不是图像级别处理它，那么:

$("div.f a").click(function() {
    var img = $(this).find("img");
    if (img[0]) {
        imagepop(img[0].src);
        return false;
    }
});

...因为它是具有 src 的 img 元素，而不是 a 元素。 (这里不需要使用 attr，src 反射属性受到所有主要浏览器(可能还有所有次要浏览器)的支持。)