Jquery 动态附加Json数据无法正常工作

我试图通过Jason文件动态地将image src path、alt text和heading添加到我的html中，但是每次代码数据都是重复的，它只是更新每个div的最后一组值

HTML

如何限制Json文件中不断更新到所有div的一个值，而不是一个值到一个div

---

下面是我面临的问题的屏幕截图

请尝试以下方式修改您的javascript:
从URL检索到的JSON中可能有N个以上的条目：
因此，我们添加了一个检查，同时循环JSON中的每个条目。循环输入是否存在相同数量的产品容器div。如果存在，则仅更新图像源和H2文本

$(document).ready(function() {
    $(".main-products .product-container > img").attr('src', '');
    $(".main-products .product-container h2").text("");

    var url = 'https://api.myjson.com/bins/nw3jc';
    //Populate dropdown with list of provinces
    $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
            if( typeof $(".main-products .product-container").eq(key) != 'undefined' ) {
                var product_container = $(".main-products .product-container").eq(key);
                product_container.find('h2').text(entry.name);
                product_container.find('img').attr('src', entry.path).attr('alt', entry.alt);
            }
        });
    });
});

$（“.main products.product container”）.find（'h2'）

选择每个

h2

。您可能需要更好的过滤逻辑，尽管还不完全清楚AJAX内容与HTML的关系，以便为您提供建议

$(document).ready(function() {
    $(".main-products .product-container > img").attr('src', '');
    $(".main-products .product-container h2").text("");

    var url = 'https://api.myjson.com/bins/nw3jc';
    //Populate dropdown with list of provinces
    $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
        $(".main-products .product-container").find('h2').text(entry.name);
        $(".main-products .product-container > img").attr('src', entry.path).attr('alt', entry.alt);
        });
    });
});

$(document).ready(function() {
    $(".main-products .product-container > img").attr('src', '');
    $(".main-products .product-container h2").text("");

    var url = 'https://api.myjson.com/bins/nw3jc';
    //Populate dropdown with list of provinces
    $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
            if( typeof $(".main-products .product-container").eq(key) != 'undefined' ) {
                var product_container = $(".main-products .product-container").eq(key);
                product_container.find('h2').text(entry.name);
                product_container.find('img').attr('src', entry.path).attr('alt', entry.alt);
            }
        });
    });
});