1

配列を取り、テキストが配列内の要素である 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);
        });

ここでフィドルからのコンソール出力を確認できますが、何らかの理由で QR コードがフィドル ウィンドウに表示されず、私のローカル マシンでは表示されます。私が抱えている問題は、配列内の各要素のコンソール出力の変化を確認できるという事実に関係なく、最後の QR コードは配列内の最後の要素が 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 に答える