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

jQuery: How to write "src" attribute into Onclick function argument of child element

本文关键字：quot 元素 参数 函数 Onclick 属性 何编写 src jQuery 转换      更新时间：2023-09-26

我使用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')返回"undefined"

我应该如何修复我的代码行，还是最好从imagepop函数内部读取img src属性?

**注意，我没有开发页面，使每个div都有一个唯一的ID，也不打算这样做。<div>标签中的所有元素都没有指定的id。

…我想把它变成…

无论如何，我不会的。而不是，我将使用这样的函数:

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

这行，可能包装在ready处理程序中，做的是:如果用户单击图像，它做imagepop的事情并取消事件，这(除其他事项外)防止链接触发。

叫做渐进增强。启用JavaScript的用户代理将使用上述链接，而未启用JavaScript的用户代理仍将看到并遵循该链接。请记住，用户代理不仅仅是浏览器，它们还包括爬虫、蜘蛛等，是的，还包括禁用JavaScript的浏览器。

Update:如果您真的想在链接级别处理它(这可能更适合键盘)，而不是图像级别，那么:

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

…因为它是img，而不是a，元素有src。(这里不需要使用attr, src反射属性被所有主要的——也可能是所有次要的——浏览器支持。)

try this:

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

基本上，它选择.f类下的所有锚，并对每个锚应用onclick。在onclick函数中，我们引用this，这是当前的锚标记，并将其放入一个jQuery对象中。这允许我们在锚标记下找到所有img元素，拉出它的src属性，并通过imagepop()运行它。

相关文章：