如何从其他节点传函数标签及向addItem()传元素内容？

首先咱们先理清楚当前的小问题：一是按钮调用addItem()时没传参，二是你的图片和按钮用了同一个id="Phone1"，这会导致DOM元素查找冲突，建议先把按钮的id改成比如btn-Phone1避免问题。

接下来给你两种可行的方案：

方案1：直接修改onclick事件传参 #

这种方式适合快速修改现有代码，不需要大改动：

第一步：更新HTML的按钮代码 #

把按钮的onclick改成传入当前元素this，同时修正重复的id：

<a href="javascript:void(0)" class="btn1" id="btn-Phone1" onclick="addItem(this)">Addу</a>

第二步：修改addItem()函数逻辑 #

通过传入的按钮元素，找到它所在的article父容器，进而提取图片src、价格、产品名称和id：

function addItem(el) {
  // 找到当前按钮所属的产品article容器
  const productArticle = el.closest('article');
  
  // 提取需要的产品信息
  const productId = productArticle.querySelector('img').id;
  const imgSrc = productArticle.querySelector('img').src;
  const price = productArticle.querySelector('h2').textContent.trim();
  const productName = productArticle.querySelector('p').textContent.trim();

  // 打印验证信息（可按需删除）
  console.log('产品信息：', { productId, imgSrc, price, productName });

  // 发送POST请求，把所有数据打包成JSON发送
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/addItem', true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.send(JSON.stringify({
    id: productId,
    imgSrc: imgSrc,
    price: price,
    name: productName
  }));
}

方案2：使用事件委托（更优雅的方式） #

如果页面上有多个这类产品按钮，事件委托会更高效——不需要给每个按钮都绑定onclick事件，只需要给父容器绑定一次监听：

第一步：更新HTML结构 #

给所有产品的父容器加一个类名（比如product-list），同时去掉按钮的onclick属性：

<div class="product-list">
  <article>
    <img src="https://static.svyaznoy.ru/upload/iblock/d1c/4165313_10.jpg/resize/483x483/hq/" id="Phone1" alt="image" title="nokia">
    <h2>100$</h2>
    <p>Nokia</p>
    <span class="btns">
      <a href="javascript:void(0)" class="btn1" id="btn-Phone1">Addу</a>
      <a href="" class="btn1">about</a>
    </span>
  </article>
  <!-- 这里可以放更多产品article -->
</div>

第二步：添加事件监听代码 #

// 给产品列表容器绑定点击事件
document.querySelector('.product-list').addEventListener('click', function(e) {
  // 判断点击的是"Addу"按钮
  const targetBtn = e.target;
  if (targetBtn.classList.contains('btn1') && targetBtn.textContent.trim() === 'Addу') {
    // 同样找到所属的article容器
    const productArticle = targetBtn.closest('article');
    
    // 提取产品信息
    const productId = productArticle.querySelector('img').id;
    const imgSrc = productArticle.querySelector('img').src;
    const price = productArticle.querySelector('h2').textContent.trim();
    const productName = productArticle.querySelector('p').textContent.trim();

    console.log('产品信息：', { productId, imgSrc, price, productName });

    // 发送请求
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/addItem', true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(JSON.stringify({
      id: productId,
      imgSrc: imgSrc,
      price: price,
      name: productName
    }));
  }
});

为什么用closest()？ #

closest('article')可以快速找到当前元素最近的父级article元素，不管按钮在article里的嵌套层级如何变化，都能准确获取到对应的产品信息，比一层层用parentNode要灵活得多。

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