在 JavaScript HTML 中呈现具有相同 ID 的多个元素
我正在尝试在一个 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 进行渲染。
catspeake浏览 331回答 3
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 并从属性中获取值。 -
慕斯王
在你的 for 循环中有一个错误您将作为数组的元素作为第一个属性传入 JsBarcode像那样正确 var element = document.querySelectorAll("#barcode"); [].forEach.call(element, function(elem){ JsBarcode(elem, { format: "code39", lineColor: "#0aa", width: 4, height: 40, displayValue: false }); }) -
智慧大石
html 页面上不能有多个具有相同值的 id。针对您的情况的一种解决方案是使用类更改 id，然后使用选择器使用该类。将 id="barcode" 更改为 class="barcode"，然后document.querySelectorAll(".barcode");
随时随地看视频慕课网APP
相关分类
JavaScript