javascript - jQuery 每个只返回最后一个元素，Google 图表 API

Question

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

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

您可以从 fiddle here 看到控制台输出尽管由于某种原因，二维码没有出现在 fiddle 窗口中，但它们出现在我的本地计算机上。我遇到的问题是，无论您可以看到数组中每个元素的控制台输出都发生变化，最后一个二维码我得到的唯一二维码是数组中重复 X 次的最后一个元素。 即使控制台输出是正确的，每个 QR jar 都会扫描并打印“ox”。这里发生了什么？

Answer 1

选择器 append body 的形象是错误的。您正在选择所有现有的 img元素，而您想要创建一个新元素。试试这个:

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

Example fiddle

注:$('<img />')不是$('img') .