javascript - 根据之前的类多次添加条形码

Question

我有一个数字列表，我需要自动将它们分别转换为条形码。我可以让第一个改变，但我不能让后面的改变。我有一个 jquery 条形码生成器。我对此很陌生。请帮忙。

<table width=180 border=0 cellpadding=0 cellspacing=0>
  <tr> 
    <td class="barcode_needed">10133</td>
  </tr>
  <tr> 
    <td class="barcode_needed">20133</td>
  </tr>
  <tr> 
    <td class="barcode_needed">30133</td>
  </tr>
</table>


<link rel="stylesheet" type="text/css" href="http://barcode-coder.com/css/style.css?ft=1298939919" />
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-barcode-last.min.js"></script>


<script>
  $("td.barcode_needed").after("<div id='bcTarget1'>");
  $("#bcTarget1").barcode(('G' + $("td.barcode_needed").html()), "code128");
</script>

Answer 1

您的问题是您正在创建多个 <div>与id相同的元素属性。当您这样做时:

$("#bcTarget1")

jQuery 只会找到第一个条形码，因此您只会得到一个条形码。您还通过插入 <div> 来混淆元素。作为 <tr> 的 child .

首先，修复您的 HTML 结构(包括重复的 id 属性):

$('td.barcode_needed').append('<div class="bcTarget">');

这会将您的 <div>在<td>里面(以便您的元素嵌套正确)并替换 id带有 class 的属性.

然后，通过引用下一个结构来修复条形码。

$('.bcTarget').each(function() {
    var $this = $(this);
    $this.barcode(
        'G' + $this.closest('td.barcode_needed').text(),
        'code128'
    );
});

closest 调用在树上向上查找与选择器匹配的最近的祖先。你可以只使用 text 在您找到的表格单元格上 <div>当您调用 .text 时，您刚刚添加的 s 仍为空.

实例:http://jsfiddle.net/ambiguous/eaYTZ/

当然，您可能想尝试一下样式。