运行Javascript时区分具有相同类或ID的多个div的方法

我正在为发票上的[id]生成二维码

现在，我在每个地方都有一个javascript，那里将运行一个qr代码，并生成代码

<script type="text/javascript">

    function makeCode (data,width) {    
var qrcode = new QRCode(document.getElementById(data), {
    width : width,
    height : width
});

    var length = (data).length;

        if (length===10) {qrcode.makeCode("10" + data);}
        else {qrcode.makeCode(data);}
}
</script>

函数makeCode（数据，宽度）{
var qrcode=新的qrcode（document.getElementById（data）{
宽度：宽度，
高度：宽度
});
变量长度=（数据）.length；
if（length==10）{qrcode.makeCode（“10”+数据）；}
else{qrcode.makeCode（数据）；}
}

makeCode（“[id]”，“50”）

我必须使用[id]作为div的“id”的原因是，它是我为该项获得的唯一一块动态内容

问题是，当我有多个具有相同[id]的项目时，javascript当然会将所有QR码堆叠到具有该id的第一个

有没有办法让javascript知道它是从第三个DIV运行的（例如），然后将代码放入第三个DIV，而不是第一个DIV

我知道不应该有多个具有相同ID元素的div。这是问题的一部分，我正试图让它们独一无二，但我不知道如何做到

我添加了一个jfiddle，这样您可以更清楚地看到这个问题

---

将您的html更改为：

<div data-content="qr-content" data-value="Your qr content"></div>
    <script>
       var elements = document.queryselectorall('[data-content="qr-content"]');
       for (var i=0; i<elements.length; i++)
           makeCode(elements[i].getAttribute('data-value'), 50);
        }
   </script>

var elements=document.queryselectorall（'[data content=“qr content”]'）；
对于（var i=0；i，如前所述，您当前网站逻辑中很少有东西需要调整以适应更动态的变化

首先，应该有一个表示购物车的
表
，在该购物车中，您可以有多个
行
，用于生成QRcode。每个相同的
id
可以有一个索引标志1..2..3

我已经做了一个演示，演示了如何通过更改html结构来解决您的问题


让我知道你的想法。
我不知道这是怎么回事

然而，在“产品”的产品中添加一个类并在文档末尾发布以下代码是有效的

    $.each($(".product"), function(index, value){
    var num = index + 1;
    $(value).attr("id","qrcode"+ num);
});

它使每个id在运行后都是唯一的。但是qr javascript仍然知道将正确的图像放入哪个div。
不应该在单个页面上有重复的
id
，而是使用
数据属性
？类似
的东西我知道不应该有多个相同的id，这就是问题所在。我问的是，当我得到的都是相同的[id]时，如何生成一个唯一的id（当我们的系统中有两个项目具有相同的id）。也许可以制作一个JSFIDLE演示，我们可以看看发生了什么？这是一个好主意……谢谢。我将制作JFIDLE并更新问题。这是JFIDLE：谢谢……我在哪里指定[id]（产品编号）我想为哪个部门生成二维码？这个代码能把部门中的任何东西都转换成二维码吗？你是对的。我刚刚更新了代码。请检查一下并让我知道。如果你发现它有用，别忘了投票。我正在做一个打印发票的页面…解决方案可以为一张发票工作，但问题是有很多发票，所以我不能将所有产品都放在一个表中。每个订单最多只能有一个表。但是，由于页面显示多个发票，因此当多人订购同一物品时，会出现问题。