html 中的条形码生成使用 php 给出相同的值

Question

我正在使用 js 条码生成器在我的 PHP 网站中生成条码，在页面中我有多个发票，每个发票都应该有唯一的条码，我的代码如下所示：

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>

<?php foreach($catil as $val){?>

<div class="col-4">
  <svg class="barcode"></svg>
  <script>
    JsBarcode(".barcode", "<?=$val->batchnumber?>");
  </script>

</div>

<?php}?>

然而，即使所有发票的 batchnumber 列都是唯一的，这也会为所有 inoices 生成相同的条形码，谁能告诉我这里有什么问题，在此先感谢

Answer 1

你可以这样做：

我会将您的条形码作为数据属性添加到 svg 中，例如，

<?php foreach($catil as $val){?>
<div class="col-4">
  <svg class="barcode" data-barcode="<?=$val->batchnumber?>"></svg>

</div>
<?php}?>

然后在生成所有条形码之后运行这个jquery代码。

$(".barcode").each(function() {
  $(this).JsBarcode($(this).data("barcode"));
});

演示

$(".barcode").each(function() {
  $(this).JsBarcode($(this).data("barcode"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"></script>
<div class="col-4">
  <svg class="barcode" data-barcode="hi"></svg>

</div>
<div class="col-4">
  <svg class="barcode" data-barcode="test"></svg>

</div>

Answer 2

您的元素选择器必须是唯一的

假设批号是唯一的你可以这样修改

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>

<?php 
foreach($catil as $val){
$batchnumber = $val->batchnumber;
?>

<div class="col-4">
  <svg id="B_<?=$batchnumber?>"></svg>
  <script>
    JsBarcode("#B_<?=$batchnumber?>", "<?=$batchnumber?>");
  </script>

</div>

<?php}?>

html 中的条形码生成使用 php 给出相同的值

barcode generation in html using php giving same value

html

javascript

php

jquery

barcode