Javascript jQuery：如何编写；src"；属性转换为子元素的Onclick函数参数

我使用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>

…但

$（this）.attr（'src'）

返回“undefined”

我应该如何修复代码行，还是从

imagepop

函数内部读取

img src

属性更好

**注意，我没有开发页面，使每个div都有一个唯一的ID，也不打算这样做。

标记内的所有元素都没有分配ID

…我想把它变成

无论如何，我不会。相反，我会使用如下函数：

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

这一行可能包含在一个处理程序中，它的作用是：如果用户单击图像，它会执行

imagepop

操作并取消事件，这会阻止链接触发

这叫做渐进增强。启用JavaScript的用户代理将使用上述内容，而未启用JavaScript的用户代理仍将看到并跟踪链接。请记住，用户代理不仅仅是浏览器，还包括爬虫、爬行器等，是的，还有禁用JavaScript的浏览器

---

更新：如果您真的想在链接级别（可能更方便键盘）而不是图像级别处理它，那么：

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

…因为它是

img

，而不是

a

，元素具有

src

。（无需使用

attr

此处，所有主要浏览器（可能包括所有次要浏览器）都支持

src

反射属性。）

尝试以下操作：

$('.f a').onclick(function(e){
imagepop($(this).find('img').attr('src'));
e.preventDefault();
});

---

基本上，它选择

.f

类下的所有锚，并对每个锚应用

onclick

。在onclick函数中，我们引用当前锚标记

this

，并将其放入jQuery对象中。这允许我们找到锚标记下的所有

img

元素，拉动它的

src

属性，并通过

imagepop（）

运行它好的-但我希望onclick处理程序位于

元素上，而不是

？@Alien:我只是想你可能需要它，并更新了答案。哈哈！：-）它起作用了。也感谢您提供有关渐进式增强的额外信息。您忘了在JS代码字符串中加引号/转义，因此它显示为
imagepop(http://www.example.com/images/fig-03-2.png)
这显然行不通。然而，在任何情况下，从字符串设置事件处理程序属性在跨浏览器中都是非常不可靠的，而且从一开始就是一个坏主意。您可以为函数对象分配事件处理程序设置DOM
元素。单击
，也可以像TJ的回答中那样使用jQuery方式，但不要将JS代码放在字符串中。此外，请将
href
保留在适当的位置，这样它们仍然可以作为正常链接工作，我们可以集中精力，通过键盘导航中键单击以获得新选项卡，等等。。。我总是太慢=也许吧，但我想我以前看过你的一两篇帖子
$("div.f a").click(function() {
    var img = $(this).find("img");
    if (img[0]) {
        imagepop(img[0].src);
        return false;
    }
});

$('.f a').onclick(function(e){
imagepop($(this).find('img').attr('src'));
e.preventDefault();
});