在单个页面上创建多个二维码
creating multiple qr codes on a single page
我需要在一个页面上创建多个二维码。
我使用的库
https://larsjung.de/jquery-qrcode/
我用这样的代码打印了多个,但是二维码创建的值是“无文本”。
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>
数据属性应该全部小写,要使用“$(this)”你需要一个 each
您有 DIVS,因此将 canvas 更改为 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>
我需要在一个页面上创建多个二维码。
我使用的库
https://larsjung.de/jquery-qrcode/
我用这样的代码打印了多个,但是二维码创建的值是“无文本”。
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>
数据属性应该全部小写,要使用“$(this)”你需要一个 each
您有 DIVS,因此将 canvas 更改为 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>