Question

我尝试定位18 $（＆＃39; .char-names＆＃39;）元素，并使用本地JSON文件中的名称动态填充。 3个控制台日志显示18个不同的id，charName，ingName，因此数据正在链接。它只是在每个插槽中填充$（＆＃39; .char-names＆＃39;）和相同的名称。我把头发拉到这里。

$.getJSON('people.json', function(data) {
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;
        console.log(id);
        console.log(charName);
        console.log(imgName);

        $('.char-names').text(charName);
    }
});

HTML ...

<div class="faces-container">
    <img src="img/face1.jpg" class="faces">
    <p class="char-names"></p>
</div>

Answer 1

对于初学者，不要在数组上使用for in。

如果$('.char-names')元素的索引与数组数据相同，则可以使用它们的索引

$.getJSON('people.json', function(data) {
    var $charNames =  $('.char-names');
    $.each(data, function(i, obj){
          $charNames.eq(i).text(obj.name);
    });
});

如果索引不相同，则问题

中没有提供足够的详细信息

Answer 2

也许是这样的。我还没有测试过它

$.getJSON('people.json', function(data) {
    var charNamesArray = [];
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;
        charNamesArray.push(charName);
    }
});

var charNames = document.getElementsByClassName('char-names');
for(var i = 0;i < charNamesArray.length;i++){
    charNames[i].innerHTML(charNamesArray[i]);
}

Answer 3

动态生成这些元素最好，因为JSON对象的条目可以是任意长度。所以你的JS应该是：

$.getJSON('people.json', function(data) {
    // the container
    $container = $('#container');
    // $container.empty(); // if you want to empty it first
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;

        var $name = $('<p>' + charName + '</p>').addClass('faces');
        var $img = $('<img src="' + imgName + '"/>').addClass('char-names');
        var $div = $('<div></div>').append($img)
                                   .append($name)
                                   .addClass('faces-container');
        $container.append($div);
    }
});

你的HTML应该有一个空元素（将动态填充）：

<div id='container'></div>

使用JSON数据填充<p>标记以进行循环

3 个答案: