如何使用Javascript/jQuery将图片URL和标题传入按钮链接

API 探路者

2026-6-26

解决方案

jQuery 实现

通过遍历每个产品项，提取对应图片地址和标题，动态生成带参数的链接即可批量完成设置，代码如下：

$(document).ready(function() {
  $('.product-item').each(function() {
    const $item = $(this);
    // 提取当前产品项里的图片地址
    const imgSrc = $item.find('img').attr('src');
    // 提取产品标题并去除首尾空白
    const productTitle = $item.find('h3').text().trim();
    // 获取按钮元素
    const $button = $item.find('.button');
    // 构造编码后的链接（避免空格/特殊字符破坏URL结构）
    const href = `/inquiry?image=${encodeURIComponent(imgSrc)}&title=${encodeURIComponent(productTitle)}`;
    // 把按钮内容替换为带链接的a标签
    $button.html(`<a href="${href}">${$button.text().trim()}</a>`);
  });
});

原生 JavaScript 实现

如果不想依赖jQuery，用原生JS也能实现同样效果：

document.addEventListener('DOMContentLoaded', function() {
  const productItems = document.querySelectorAll('.product-item');
  productItems.forEach(item => {
    // 提取图片地址
    const imgSrc = item.querySelector('img').src;
    // 提取产品标题
    const productTitle = item.querySelector('h3').textContent.trim();
    const button = item.querySelector('.button');
    // 构造编码后的链接
    const href = `/inquiry?image=${encodeURIComponent(imgSrc)}&title=${encodeURIComponent(productTitle)}`;
    // 创建a标签并替换按钮内容
    const link = document.createElement('a');
    link.href = href;
    link.textContent = button.textContent.trim();
    button.innerHTML = '';
    button.appendChild(link);
  });
});