jquery - jQuery の json 形式

Question

なぜこれがうまくいかないのですか？

var data = {"one": [
    {"slot1":true, "app":"facebook"},
    {"slot2":true, "app2": "facebook"}
]};

$(data.one).each(function() {
    if(this.slot1==true){
        $('#dropable').find('.1_1').append('<img src="img/apps/' + this.app1 + '.png" alt="' + this.app1 + '">');
    }
    if(this.slot2==true){
        $('#dropable').find('.1_2').append('<img src="img/apps/' + this.app2 + '.png" alt="' + this.app2 + '">');
    }
});

私の #dropable:

<div id="dropable" class="drag"><div class="app 1_1"></div></div>
<div id="dropable" class="drag"><div class="app 1_2"></div></div>

Answer 1

同じIDを持つ2つのDIVがあります。'#dropable'を'.drag'に変更してみてください。

Answer 2

このコードには複数の問題があります。

1$().eachつ目は、DOM 要素用であり、独自の配列/オブジェクト用ではありません。あなたがしたい$.each。第二に、this.app1あなたのオブジェクトには存在しませappんapp2。

最後に、最も重要なこととして、あなたは の 2 つの ID を持っていますdropable。そんなことはできません。ID は一意である必要があります。ID の代わりにクラスを使用します。

<div class="drag"><div class="app 1_1"></div></div>
<div class="drag"><div class="app 1_2"></div></div>

そして、次のようにします。

var data = {"one": [
    {"slot1":true, "app1":"facebook"},
    {"slot2":true, "app2":"facebook"}
]};

$.each(data.one,function() {
    if(this.slot1==true){
        $('.drag').find('.1_1').append('<img src="img/apps/' + this.app1 + '.png" alt="' + this.app1 + '">');
    }
    if(this.slot2==true){
        $('.drag').find('.1_2').append('<img src="img/apps/' + this.app2 + '.png" alt="' + this.app2 + '">');
    }
});