在一个页面上创建多个二维码

Question

我需要在一个页面上创建多个二维码。

我使用的图书馆

https://larsjung.de/jquery-qrcode/

我用这样一个代码打印了多个，但二维码创造的价值是“无文本”。

text: $(this).data('qrCodeVal'),

它生成一个条形码与下面的代码，但不幸的是，我有麻烦创建多个条形码。

null

$(".qrCode").qrcode({

  // render method: 'canvas', 'image' or 'div'
  render: 'canvas',

  // version range somewhere in 1 .. 40
  minVersion: 1,
  maxVersion: 40,

  // error correction level: 'L', 'M', 'Q' or 'H'
  ecLevel: 'L',

  // offset in pixel if drawn onto existing canvas
  left: 0,
  top: 0,

  // size in pixel
  size: 100,

  // code color or image element
  fill: '#000',

  // background color or image element, null for transparent background
  background: null,

  // content
  text: 'test qr code value',

  // corner radius relative to module width: 0.0 .. 0.5
  radius: 0,

  // quiet zone in modules
  quiet: 0,

  // modes
  // 0: normal
  // 1: label strip
  // 2: label box
  // 3: image strip
  // 4: image box
  mode: 0,

  mSize: 0.1,
  mPosX: 0.5,
  mPosY: 0.5,

  label: 'no label',
  fontname: 'sans',
  fontcolor: '#000',

  image: null
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" ></script>

<div class="qrCode" data-qrCodeVal="qrCodeValue1"></div>
<div class="qrCode" data-qrCodeVal="qrCodeValue2"></div>
<div class="qrCode" data-qrCodeVal="qrCodeValue3"></div>
<div class="qrCode" data-qrCodeVal="qrCodeValue4"></div>

null

Answer 1

data-attributes都应该是小写的，要使用“$(this)”，您需要一个each

您有div，所以将canvas更改为div

null

$(".qrCode").each(function() {
  $(this).qrcode({

    // render method: 'canvas', 'image' or 'div'
    render: 'div',

    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 100,

    // code color or image element
    fill: '#fff',

    // background color or image element, null for transparent background
    background: null,

    // content
    text: $(this).data('qrcodeval'),

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 0,

    // modes
    // 0: normal
    // 1: label strip
    // 2: label box
    // 3: image strip
    // 4: image box
    mode: 0,

    mSize: 0.1,
    mPosX: 0.5,
    mPosY: 0.5,

    label: 'no label',
    fontname: 'sans',
    fontcolor: '#fff',

    image: null
  });
});

css lang-css prettyprint-override">div {
  margin: 20px;
  border: 3px solid red;
  display: inline-block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<div class="qrCode" data-qrcodeval="test qr code value 1"></div>
<div class="qrCode" data-qrcodeval="test qr code value 2"></div>
<div class="qrCode" data-qrcodeval="test qr code value 3"></div>
<div class="qrCode" data-qrcodeval="test qr code value 4"></div>