在 JavaScript HTML 中呈现具有相同 ID 的多个元素

Question

我正在尝试在一个 HTML 页面中呈现具有相同 ID 的多个条形码。下面是我的代码。

    <html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
</head>
<body>

<img id="barcode"
 
  jsbarcode-value="123456"
 />

<img id="barcode"
  
  jsbarcode-value="654321"
 />
<script>
      var element = document.querySelectorAll("#barcode");
      for(var i = 0; i < element.length; i++)     
      JsBarcode(element, {
        format: "code39",
        lineColor: "#0aa",
        width: 4,
        height: 40,
        displayValue: false
});
      </script>
</body>
</html>

但是我在 Chrome 中打开时得到一个空白页面。请帮助我如何使用唯一 ID 进行渲染。

Answer 1

你的for循环有一个错误

您首先传入 JsBarcode 属性数组元素

这样改正

  var element = document.querySelectorAll("#barcode");
  [].forEach.call(element, function(elem){
    JsBarcode(elem, {
    
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
    });
  })

Answer 2

html 页面上不能有多个具有相同值的 ID。针对您的情况的一种解决方案是使用 class 更改 id，然后使用选择器使用 class.

将 id="barcode" 更改为 class="barcode"，然后

document.querySelectorAll(".barcode");

Answer 3

所以问题是传递给 JsBarcode 方法的第一个参数是一个元素。您需要传递 jquery id 的字符串。如果您查看他们的文档，它有以下内容：

JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});

注意第一个参数是“#barcode”而不是实际元素。在您的情况下，看起来您正在传递的元素不是 JsBarcode 所期望的。我看到了您的问题，并且能够通过以下方式解决它：

<svg name="barcode" 
  jsbarcode-value="123456"
/>

<svg name="barcode"
  jsbarcode-value="654321"
/>

<script>
  var elements = document.getElementsByName("barcode");
  for(var i = 0; i < elements.length; i++)        {
  var id = elements[i].name + "i";
  elements[i].id = id;
  var value = elements[i].getAttribute("jsbarcode-value");
  JsBarcode("#" + id, value, {
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
  });
}     
</script>

总而言之，我将页面上的所有元素都更改为名称=“条形码”而不是 ID。然后在 for 循环中使用 name 和 incrementor 设置 id，用于将唯一 id 传递给 JsBarcode 并从属性中获取值。

在 JavaScript HTML 中呈现具有相同 ID 的多个元素

render multiple elements with same ID in JavaScript HTML

html

javascript

browser

node.js