jquery - 从 JSON 中提取多个数据集

Question

基本设置是一个简单的 JSON 文件，我通过 ajax 将其拉入页面。现在我已经可以使用这段代码正常工作了

$(document).ready(function () {
            var tour = $('.js-featureTour');
            $.ajax({
                    type: "GET",
                    url: "tour.json",
                    dataTyple: "json",
                    success: function (result) {
                        var imgSrc = result.image;
                        $('.js-featureTourTitle').text(result.tourTitle);
                        $('.js-featureTourDesc').html(result.tourDesc);
                        $('.js-featureTourImg').attr('src', imgSrc);
                    }
                })
            });

这与我的测试 JSON 文件配合得很好，但我实际上需要使用的是这样的

{
    "tour1": {
        "tourTitle": "Test Title 1",
        "tourDesc": "description 1",
        "image": "/main1.jpg"
    },
    "tour2": {
        "tourTitle": "Test Title 2",
        "tourDesc": "description 2",
        "image": "/main2.jpg"
    },
    "tour3": {
        "tourTitle": "Test Title 3",
        "tourDesc": "description 3",
        "image": "/main3.jpg"
    }
}

我真正想要的是成功阶段读取“tour1”中的内容，将其插入页面中，然后稍等一下，然后读取“tour2”中的内容并覆盖“tour1”信息，然后执行“tour3”也是如此。有人可以帮我从这里出去吗？我在这件事上坚持的时间比我愿意承认的还要长。非常感谢任何帮助。

Answer 1

您需要循环遍历 Json 对象并使用 SetTimeout 来延迟 DOM 中数据的操作。尝试下面的代码。

success: function (result) {
    $.each(results, function(i,result) {
        setInterval(function(){
          var imgSrc = result.image;
          $('.js-featureTourTitle').text(result.tourTitle);
          $('.js-featureTourDesc').html(result.tourDesc);
          $('.js-featureTourImg').attr('src', imgSrc);
        },5000)
    })
}