如何使用JavaScript从Json删除以前的值并添加新值？

Question

我有这个html代码部分

 <div id="prt">
         <select name="selectPrt" class="span12" onchange="sta_callPRT();">
          <option value="noPrt">Choose one vehicle.</option>
          <option value="prt1">PRT 1</option>
          <option value="prt2">PRT 2</option>
          <option value="prt3">PRT 3</option>
          <option value="prt4">PRT 4</option>
          <option value="prt5">PRT 5</option>
        </select>
        <div class="row-fluid">
         <div class="span6">
           <div class="section">
            <div class="sectionTitle">
              <h3>Vehicle Info</h3>
            </div>
          </div>
<div id="state"><strong>State:</strong> </div>
          <div id="freeSeats"><strong>freeSeats:</strong></div>
          <div id="battery"><strong>battery:</strong></div>
          <div id="totalDistance"><strong>totalDistance:</strong></div>
          <div id="location"><strong>Location:</strong></div>
          <div id="estimatedTime"><strong>estimatedTime"</strong></div>
          <div id="estimatedDistance"><strong>estimatedDistance:</strong></div>
          <div id="speed"><strong>speed:</strong></div>

而这个Javascript

function sta_callPRT(){

    $.getJSON('PRTInfoGenerator.php', function(json){

        $.each(json, function(key, value) {

       if(key=="state") {
          //$('#state').empty();
          //document.getElementById("parameters").appendChild(divTag);
          $('#state').append(value);
                      }
       if(key=="freeSeats") {
          $('#freeSeats').append(value);
        }
       if(key=="estimatedDistance"){
        $('#estimatedDistance').append(value);
       }
        if(key=="estimatedTime"){
        $('#estimatedTime').append(value);
       }
        if(key=="battery"){
        $('#battery').append(value);
       }
        if(key=="speed"){
        $('#speed').append(value);
       }
        if(key=="location"){
          $.each(json.location, function(par_key, par_value) {

        $('#location').append(par_key+': '+par_value+'  ');
      });
       }
       if(key=="totalDistance"){
        $('#totalDistance').append(value);
       }
    });

  });
  }

我想用html随机编写车辆值。我也有php代码来产生车辆的随机值。当我选择车辆时，它会显示一些值，但是在第二个选择中，新值会添加到第一个的末尾。在做出新选择时，如何删除先前的值并添加新的值？ 例如，这是网页中的第一选择；

State: Running
freeSeats:0
battery:95
totalDistance:8541
Location:x: -5 y: 34
estimatedTime:15
estimetedDistance:809
Speed:18

这是第二；

State: RunningRunning
freeSeats:04
battery:9540
totalDistance:85411848
Location:x: -5 y: 34 x: 84 y: -70
estimatedTime:15269
estimetedDistance:809513
Speed:1818

Answer 1

将前缀文本移到div之外，例如freeseats: <div id="freeSeats"></div>并使用$('#freeSeats').text(value)代替$('#freeSeats').append(value); 附加将附加已经存在的内容，但文本将代替该值。

更改强标记中的文本，尽管您想使用$('#freeSeats strong')但我建议不要使用强标记，而应在div / div上使用style属性。

这是您的更新代码，然后：

<div id="prt"> 
          <select name="selectPrt" class="span12" onchange="sta_callPRT();">
          <option value="noPrt">Choose one vehicle.</option>
          <option value="prt1">PRT 1</option>
          <option value="prt2">PRT 2</option>
          <option value="prt3">PRT 3</option>
          <option value="prt4">PRT 4</option>
          <option value="prt5">PRT 5</option>
        </select>
        <div class="row-fluid">
         <div class="span6">
           <div class="section">
            <div class="sectionTitle">
              <h3>Vehicle Info</h3>
            </div>
          </div>
          State:<div id="state"></div>
          freeSeats:<div id="freeSeats"></div>
          battery:<div id="battery"></div>
          totalDistance:<div id="totalDistance"></div>
          Location:<div id="location"></div>
          estimatedTime"<div id="estimatedTime"></div>
          estimatedDistance:<div id="estimatedDistance"></div>
          speed:<div id="speed"></div>

和脚本：

function sta_callPRT(){

$.getJSON('PRTInfoGenerator.php', function(json){

    $.each(json, function(key, value) {

   if(key=="state") {
      $('#state').text(value);
                  }
   if(key=="freeSeats") {
      $('#freeSeats').text(value);
    }
   if(key=="estimatedDistance"){
    $('#estimatedDistance').text(value);
   }
    if(key=="estimatedTime"){
    $('#estimatedTime').text(value);
   }
    if(key=="battery"){
    $('#battery').text(value);
   }
    if(key=="speed"){
    $('#speed').text(value);
   }
    if(key=="location"){
      $.each(json.location, function(par_key, par_value) {

    $('#location').text(par_key+': '+par_value+'  ');
  });
   }
   if(key=="totalDistance"){
    $('#totalDistance').text(value);
   }
});

`

Answer 2

每次清除div ...

function sta_callPRT(){
     $('#state, #freeSeats, #battery').empty();

     $.getJSON('PRTInfoGenerator.php', function(json){
           ...