如何用jQuery为每个图片添加链接及类似示例首个的分享链接

我来帮你搞定这两个需求，先从给图片添加链接说起，再把你现有代码里的分享链接问题修复好：

一、给每个图片添加跳转链接 #

如果要给页面里的所有图片都加上可点击的链接，用jQuery遍历图片然后包裹<a>标签就可以实现。你可以根据需求自定义链接地址，比如链接到图片本身、或者对应的详情页：

$(document).ready(function() {
  // 遍历页面中所有图片
  $("img").each(function() {
    // 示例1：链接指向图片自身地址
    var targetUrl = $(this).attr("src");
    // 示例2：如果图片有自定义的data-link属性，用这个作为链接
    // var targetUrl = $(this).data("link");
    
    // 用<a>标签包裹当前图片
    $(this).wrap(`<a href="${targetUrl}" target="_blank"></a>`);
  });
});

如果需要给不同图片设置不同的跳转地址，建议给图片加上data-link属性，比如：

<img src="photo1.jpg" data-link="https://example.com/photo1-detail">
<img src="photo2.jpg" data-link="https://example.com/photo2-detail">

这样就能通过$(this).data("link")获取到对应的跳转地址了。

二、批量生成类似示例的分享链接（修复你的代码） #

先说说你现有代码里的几个小问题：

• 类选择器漏了.：$("copy-url")应该写成$(".copy-url")
• val是jQuery方法，必须加括号调用：$('.copy-url').val()而不是$('.copy-url').val
• 标签闭合错误：你写的</span>应该改成</a>
• 遍历的时候要使用当前元素的上下文，不要用全局选择器

修复后的完整代码如下，还加入了原生分享API的支持（现代浏览器体验更好），同时做了不支持情况的兼容：

$(document).ready(function () {
  // 点击copy按钮复制链接（优化成点击按钮而非input本身）
  $(".share:contains('copy')").click(function() {
    // 找到当前div里的input并选中
    var $input = $(this).siblings(".copy-url");
    $input.select();
    document.execCommand("copy");
    alert("链接已复制到剪贴板"); // 可选：添加复制提示
  });

  // 批量添加分享链接
  $("div:has(.copy-url)").each(function() {
    var $currentDiv = $(this);
    var shareUrl = $currentDiv.find(".copy-url").val();
    
    // 创建分享链接元素
    var $shareLink = $('<a class="share" href="#">share</a>');
    
    // 绑定分享事件
    $shareLink.click(function(e) {
      e.preventDefault(); // 阻止默认跳转
      
      if (navigator.share) {
        // 支持原生分享API的浏览器，调用系统分享
        navigator.share({
          url: shareUrl
        }).then(() => {
          console.log("分享成功");
        }).catch(err => {
          console.log("分享失败：", err);
        });
      } else {
        // 不支持的浏览器，fallback为打开新窗口（或你自定义的分享逻辑）
        window.open(`https://example.com/share?url=${encodeURIComponent(shareUrl)}`, "_blank");
      }
    });
    
    // 把分享链接添加到当前div里
    $currentDiv.append($shareLink);
  });
});

对应的HTML代码（修正转义后）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" class="copy-url" value="222222" readonly="yes">
  <span class="share">copy</span>
  <a class="share" href="222222">share</a>
</div>
<div>
  <input type="text" class="copy-url" value="333333" readonly="yes">
  <span class="share">copy</span>
</div>
<div>
  <input type="text" class="copy-url" value="444444" readonly="yes">
  <span class="share">copy</span>
</div>
<div>
  <input type="text" class="copy-url" value="555555" readonly="yes">
  <span class="share">copy</span>
</div>
<div>
  <input type="text" class="copy-url" value="666666" readonly="yes">
  <span class="share">copy</span>
</div>

三、结合图片的分享链接实现 #

如果要给图片直接添加分享功能，参考下面的代码，把图片的地址作为分享链接：

$(document).ready(function() {
  // 给图片加跳转链接 + 分享按钮
  $("img").each(function() {
    var imgUrl = $(this).attr("src");
    
    // 1. 给图片包裹跳转链接
    $(this).wrap(`<a href="${imgUrl}" target="_blank"></a>`);
    
    // 2. 创建分享按钮并添加到图片旁边
    var $shareBtn = $('<button class="img-share-btn">分享图片</button>');
    $shareBtn.click(function() {
      if (navigator.share) {
        navigator.share({
          url: imgUrl,
          title: "分享图片"
        });
      } else {
        // 不支持原生分享时，复制图片链接
        var tempInput = $('<input type="text">').val(imgUrl);
        $("body").append(tempInput);
        tempInput.select();
        document.execCommand("copy");
        tempInput.remove();
        alert("图片链接已复制，可手动分享");
      }
    });
    
    // 把分享按钮放在图片链接的后面
    $(this).parent().after($shareBtn);
  });
});

内容的提问来源于stack exchange，提问作者Sourabh