在 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