Question

所以我正在从JSON文件中读取数据。然后我成功地使用AJAX调用来更新HTML代码中的div。例如：

$（ “＃carSize”）附加（carInfo [0] .carSize）;

div carSize将从JSON文件中获取数据。然而，将有10种不同的汽车具有许多不同的属性，如carSize。由于carInfo数组很大并且具有多个不同的属性，因此有一种方法可以更简单地实现这一点，而无需为每辆汽车的属性创建一个不同的div来附加。

HTML：

<html>
<link href="json.css" rel="stylesheet" type="text/css">

<body>

<div class = "whiteBar">
    <div id = "box1">
        <div id = "carPrice"></div>
        <div id = "carRate"></div>
        <a href = "" id = "selBut">SELECT</a>
        <div id = "total"></div>
    </div>

<div id = "box2">
    <div id = "carSize"></div>
</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="my_script.js"></script>
</body>
</html>

JS

$(document).ready(function() 
{
    $.getScript("vehicle_data.json", function() 
    {
        $("#carPrice").append(carInfo[0].carPrice + ".00");
        $("#carRate").append(carInfo[0].carRate);
        $("#total").append("Total: " + carInfo[0].carPrice * 7 + ".00 USD");
        $("#carSize").append(carInfo[0].carSize);
    });     
});

JSON（样本）

var carInfo = [
    {
        carId: 1,
        carPrice : 35.00,
        carRate : 'USD/DAY',
        carSize : 'Extra Small Car',
        type : 'Economy',
    },
    {
        carId: 2,
        carPrice : 37.00,
        carRate : 'USD/DAY',
        carSize : 'Small Car',
        type : 'Compact',       
    }
];

请注意JS代码仅适用于1辆车，我需要为其他9辆车完成。有什么想法吗？

Answer 1

创建一个新的div而不是将其附加到现有的html 现在您已将其存储在变量中，您可以附加任何您想要的内容

$.each(carInfo,function(i,car){
    //create a new div to store car info
    var myNewDiv = $('<div class="car-info"></div>');

    // append car properties to the info div
    myNewDiv.append(car.carSive);
    myNewDiv.append(car.carId);  //etc

    // append the new div to existing html
    $('.whiteBar').append(myNewDiv);
});

Answer 2

你可以这样做：

$(document).ready(function(){
   $.getScript("vehicle_data.json", function() {

    for(i=0; i<carInfo.length; i++){
        var $carContainer = $('<div class="carContainer-'+i+'"></div>');
        $carContainer.append('<div id="carPrice-'+i+'">'+carInfo[i].carPrice + ".00"+'</div>')
        .append('<div id="carRate-'+i+'">'+carInfo[i].carRate+'</div>')
        .append('<div id="total-'+i+'">'+"Total: " + carInfo[i].carPrice * 7 + ".00 USD"+'</div>')
        .append('<div id="carSize-'+i+'">'+carInfo[i].carSize+'</div>');
        $('body').append($carContainer);
    }

   });     
});

Answer 3

如果你一次性购买所有汽车，这是一个通用的解决方案：

var carInfo = [
    {
        carId: 1,
        carPrice : 35.00,
        carRate : 'USD/DAY',
        carSize : 'Extra Small Car',
        type : 'Economy',
    },
    {
        carId: 2,
        carPrice : 37.00,
        carRate : 'USD/DAY',
        carSize : 'Small Car',
        type : 'Compact',       
    }
];

function getCarHTML (car){
    var carHtml = '<div class = "box1" class="car-' + car.carId + '" data-id="' + car.carId + '">' +
        '<div id = "carPrice">' + car.carPrice + '</div>' +
        '<div id = "carRate">' + car.carRate + '</div>' +
        '<a href = "" class="select-btn" data-id="' + car.carId + '">SELECT</a>' +
        '<div id = "total">' + car.carPrice + '</div>' +
    '</div>' +
    '<div class = "box2">' +
        '<div class = "carSize">' + car.carSize + '</div>' +
    '</div>';
    return carHtml;
};

//this is your ajax on success function
var showCars = function (cars) {
    var $carContainer = $('#car-info-container');
    cars.forEach(function(car) {
        var carHTML = getCarHTML(car);
        var $carIfPreset = $carContainer.find('.car-' + car.carId);
        if ($carIfPreset.length) {
            $carIfPreset.replaceWith(carHTML);
        } else {
            $carContainer.append(carHTML);
        }
    });
};

//calling function here, you should make this call inside your ajax
//Assuming ajax to return an array of cars
showCars(carInfo);

这是一个有效的jsfiddle：https://jsfiddle.net/fjh3mjtm/

预计这里的json是{cars：[{carId：1，carPrice：35.00，...}，{carId：2，carPrice：37.00，...}，...]}

Answer 4

我不太确定这是否符合你的需要，但我对jsRender http://www.jsviews.com/有好运，因为这样的情况。

如何在HTML中调用多个不同的AJAX调用同一个div

4 个答案: