-1

私は現在のプロジェクトで jQuery を使用しています。基本的には、JSON 配列内の各画像 src の画像を動的に作成したいと考えています。これが HTML data-* JSON 配列です。

<div class="" data-slides='{
    "imgs" : [{
    "img" : "//placekitten.com/g/200/300",
    "img" : "//placekitten.com/g/200/300",
    "img" : "//placekitten.com/g/200/300",
}]}'>

「img の img 用」ロジックが必要だと思いますが、これまで扱ったことはありません。「imgs」配列の内容を 1 つずつ「警告」するにはどうすればよいでしょうか。：） ありがとう！

4

3 に答える 3

0

属性には必ず有効な JSON を使用してください。使用するつもりだったようです：

<div class="" data-slides='{
    "imgs" : [
        {"img": "//placekitten.com/g/200/300"},
        {"img": "//placekitten.com/g/200/300"},
        {"img": "//placekitten.com/g/200/300"}
    ]
}'>

次を使用してアクセスできます。

var slides = $('[data-slides]').data('slides');

この.data()メソッドは、オブジェクトとして正常に解析できる場合、JSON 値を自動的にオブジェクトに変換します。そのため、使用できるコレクションを反復処理するには、次のようにします。

var index;
for (index in slides.imgs) {
    alert(slides[index].img);
}

または、コレクションを反復処理する「jQuery の方法」の場合 (を使用jQuery.each):

$.each(slides.imgs, function () {
    alert(this.img);
});

とはいえ、元の構造は非常に冗長であり、実際には単一の配列に単純化できます。

<div class="" data-slides='[
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300"
]'>

これは次のように繰り返されます。

var slides = $('[data-slides]').data('slides');
$.each(slides, function () {
    alert(this);
});
于 2013-05-28T18:17:53.480 に答える