在 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。 针对您的情况的一种解决方案是使用类更改 id，然后使用选择器使用类。

将 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>

总之，我将页面上的所有元素更改为 name="barcode" 而不是 id。 然后在 for 循环中使用 name 和增量器设置 id，该循环用于将唯一 id 传递到 JsBarcode 并从属性中获取值。

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

问题描述

3 个解决方案

解决方案1
0 2020-10-13 19:33:28

解决方案2
0 2020-10-13 19:42:36

解决方案3
0 已采纳 2020-10-13 19:51:50

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

问题描述

3 个解决方案

解决方案1 0 2020-10-13 19:33:28

解决方案2 0 2020-10-13 19:42:36

解决方案3 0 已采纳 2020-10-13 19:51:50

解决方案1
0 2020-10-13 19:33:28

解决方案2
0 2020-10-13 19:42:36

解决方案3
0 已采纳 2020-10-13 19:51:50