jQuery每个只返回最后一个元素，谷歌图表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);
        });

你可以看到小提琴here的控制台输出，虽然由于某些原因QR码没有出现在小提琴窗口中，但它们在我的本地机器上显示。我得到的问题是最后一个问题，不管你能看到数组中每个元素的控制台输出变化这一事实，我得到的唯一QR码是数组中最后重复X次的元素。 即使控制台输出正确，每个QR罐都会扫描并打印“牛”。这里发生了什么？

Answer 1

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

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

Example fiddle

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