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

【问题标题】：creating multiple qr codes on a single page在一个页面上创建多个二维码
【发布时间】：2021-03-17 13:02:06
【问题描述】：

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

我使用的库

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

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

它使用以下代码生成 1 个条形码，但不幸的是，我无法创建多个条形码。

$(".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>

【问题讨论】：

我给你做了一个sn-p。请修改为minimal reproducible example

标签： javascript jquery generator qr-code

【解决方案1】：

数据属性应该全部小写，并且要使用“$(this)”，你需要一个 each

你有 DIVS 所以把画布换成 div

$(".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
  });
});

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>

【讨论】：