1

我有以下代码，它将采用一个数组并将二维码动态附加到页面，其中文本是数组中的一个元素。

$(document).ready(function () {
            var list = ['dog', 'cat', 'mouse', 'hippo', 'ox'];
            var qrUrl = 'https://chart.googleapis.com/chart?';

            //functions
            function getQrCodes(array) {

                $.each(array, function (ix, val) {
                    //options gets chl property redefined for each element
                    //in the array
                    var options = {
                        cht: 'qr',
                        chs: '300x300',
                        chl: array[ix]
                    }
                    qrOptionArray.push(options);
                    console.log('this qr should be: ' + array[ix]);
                    console.log(qrUrl + $.param(options));
                    var $img = $('img').attr('src', qrUrl + $.param(options)).appendTo('body');

                });

            }

            getQrCodes(list);
        });

您可以在此处看到小提琴的控制台输出，尽管由于某种原因，二维码不会出现在小提琴窗口中，但它们会出现在我的本地机器上。我遇到的问题是最后一个，不管您是否可以看到数组中每个元素的控制台输出发生变化，我得到的唯一二维码是数组中的最后一个元素重复 X 次。在此处输入图像描述 即使控制台输出正确，这些 QR 罐中的每一个都会扫描并打印“ox”。这里发生了什么？

4

1 回答 1

1

append将图像添加到正文的选择器是错误的。您正在选择所有现有img元素，而您想创建一个新元素。尝试这个：

var $img = $('<img />').attr('src', qrUrl + $.param(options)).appendTo('body');

示例小提琴

注意：$('<img />')不是$('img')。

于 2013-10-31T14:50:10.403 回答