Javascript选择器第一个兄弟级后按钮

Question

我的页面包含超过300个独特的条形码在一个表中，类似于下表。我给了每个条形码它自己的下载按钮，但是我如何使按钮下载只第一个兄弟姐妹条形码直接在其本身之后？

<tr>
  <td>
    (product name)
  </td>
  <td>
    (other data)
  </td>
  <td>
    (even more data)
  </td>
  <td>
    <button type="button" class="downloadBarcode"></button> <!-- Download button -->
    <svg class="barcode" etc...></svg> <!-- SVG generated by JsBarcode -->
  </td>
</tr>
<tr>
  (another product with data and a barcode)
</tr>

这是我目前使用的脚本，但它显然只适用于长列表中的第一个条形码元素：

  document.querySelector(".downloadBarcode").onclick = () => {
    svgToPng(document.querySelector('.barcode').outerHTML, (imgData) => {
      const download = document.createElement('a');
      download.href = imgData;
      download.download = 'barcode.png';
      download.click();
    });
  }

  const svgToPng = (svg, callback) => {
    const url = URL.createObjectURL(new Blob([svg], {
      type: 'image/svg+xml'
    }));
    svgUrlToPng(url, (imgData) => {
      callback(imgData);
      URL.revokeObjectURL(url);
    });
  }

  const svgUrlToPng = (svgUrl, callback) => {
    const svgImage = document.createElement('img');
    svgImage.style.position = 'absolute';
    svgImage.style.top = '-9999px';
    document.body.appendChild(svgImage);
    svgImage.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = svgImage.clientWidth;
      canvas.height = svgImage.clientHeight;
      const canvasCtx = canvas.getContext('2d');
      canvasCtx.drawImage(svgImage, 0, 0);
      const imgData = canvas.toDataURL('image/png');
      callback(imgData);
      document.body.removeChild(svgImage);
    };
    svgImage.src = svgUrl;
  }

Answer 1

使用event.currentTarget获取单击的元素。然后，您可以使用nextElementSibling来获取它之后的元素。

​

document.querySelector(".downloadBarcode").onclick = (event) => {
  svgToPng(event.currentTarget.nextElementSibling.outerHTML, (imgData) => {
    const download = document.createElement('a');
    download.href = imgData;
    download.download = 'barcode.png';
    download.click();
  });
}

​