Question

我有javascript代码：

 </script> 
    <script type="text/javascript">         
        var vehicles = {};
        var locations = ["1A","1D","2A","2B","2C","2D"];
        $(document).ready(function(){           
            $(".model1").hide();

            setInterval(function() {get_data();}, 5000);                
        });
        function get_data()
        {

            for(var i = 201;i<=217;i++){
                var sensors = new Array();
                var temp = Math.ceil(Math.random()*50)-20;
                var pres = Math.ceil(Math.random()*40)+100;
                for(var j = 0;j<locations.length;j++){
                    if(pres!=100){
                        pres += Math.ceil(Math.random()*10)-5;
                        temp += Math.ceil(Math.random()*6)-3;
                        }else{
                        pres = 0;
                        temp = 0;
                    }
                    var highPres = pres>140;
                    var lowPres = pres<100;
                    var highTemp = temp>=75;
                    var lowBattery = Math.ceil(Math.random()*80)<2;
                    sensors.push({location:locations[j],pres:pres,temp:temp,lowPres:lowPres,highPres:highPres,highTemp:highTemp,lowBattery:lowBattery,lowPresAlarm:100,highPresAlarm:140,highTempAlarm:80});
                }
                cars[i] = {code:i,sensors:sensors};                 
            }
        showView1();
        }           
        function showView1(){
                for(var carCode in cars){
                    var car = $(".model1:first").clone();
                    var carData = cars[carCode];
                    for(var j = 0;j<carData.sensors.length;j++){
                        var sensorData = carData.sensors[j];
                        if(sensorData.pres!=0&&sensorData.temp!=0){
                            car.find("div[location='"+sensorData.location+"'] div:first").html(sensorData.pres);
                            car.find("div[location='"+sensorData.location+"'] div:last").html(sensorData.temp);
                        }
                        if(sensorData.highPres || sensorData.lowPres || sensorData.highTemp){
                            car.find("div[location='"+sensorData.location+"']").attr("class","tire-red");
                            }else if(sensorData.lowBattery){
                            car.find("div[location='"+sensorData.location+"']").attr("class","tire-yellow");
                        }
                    }
                    car.appendTo($(document.body)).show();
                    car.find("div:first").panel({
                        title:"Truck: " + carCode,
                        tools: [
                        {                              
                            handler:function(){
                                var car_code = $(this).parent().parent().find("div[class='panel-title']").html();
                            }
                        }]
                    });                     
                    }   
        }   
    </script>

</head>

这个脚本使用easyui和jquery，它根据下面的html代码创建克隆，我想每隔5秒执行一次get_data函数，每次屏幕清晰并生成新数据，但上面的脚本会将新数据附加到prevoius数据，如何清除屏幕然后执行get_data函数？

<body >
    <div style="float: left;padding: 5px;" class="model1">
        <div style="width:210px;height:210px;padding:8px;">
            <div style="width: 100%;height: 70px;background: url(static/images/axel.jpg) no-repeat center;background-size: 115px 15px;">
                <div class="tire-black" style="float: left;" location="1A">
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                </div>
                <div class="tire-black" style="float: right;" location="1D">
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                </div>
            </div>
            <br>
            <div style="width: 100%;height: 70px;background: url(static/images/axel.jpg) no-repeat center;background-size: 115px 15px;">
                <div class="tire-black" style="float: left;" location="2A">
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                </div>
                <div class="tire-black" style="float: left;" location="2B">
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                </div>
                <div class="tire-black" style="float: left;margin-left: 24px;" location="2C">
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                </div>
                <div class="tire-black" style="float: right;" location="2D">
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                    <div style="font-weight: bold;padding-top: 10px;"></div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

<强>解决方案

引入了一个全局模板，该模板在document.ready事件上初始化，其内容为模板div（#template）。还介绍了一个内容显示区域（#display-area）

清除每个for loop显示区域后，会生成clone模板，然后填充数据。

<强>脚本

＆＃13;

< script type = "text/javascript" >
  var vehicles = {};
var locations = ["1A", "1D", "2A", "2B", "2C", "2D"];
var template
$(document).ready(function() {
  $(".model1").hide();
  template = $('div#template>div.model1:first');
  setInterval(function() {
    get_data();
  }, 5000);
});

function get_data() {

  for (var i = 101; i <= 117; i++) {
    var sensors = new Array();
    var temp = Math.ceil(Math.random() * 50) - 20;
    var pres = Math.ceil(Math.random() * 40) + 100;
    for (var j = 0; j < locations.length; j++) {
      if (pres != 100) {
        pres += Math.ceil(Math.random() * 10) - 5;
        temp += Math.ceil(Math.random() * 6) - 3;
      } else {
        pres = 0;
        temp = 0;
      }
      var highPres = pres > 140;
      var lowPres = pres < 100;
      var highTemp = temp >= 75;
      var lowBattery = Math.ceil(Math.random() * 80) < 2;
      sensors.push({
        location: locations[j],
        pres: pres,
        temp: temp,
        lowPres: lowPres,
        highPres: highPres,
        highTemp: highTemp,
        lowBattery: lowBattery,
        lowPresAlarm: 100,
        highPresAlarm: 140,
        highTempAlarm: 80
      });
    }
    vehicles[i] = {
      code: i,
      sensors: sensors
    };
  }
  showView1();
};

function showView1() {
  $("#display-area").empty();
  for (var vehicleCode in vehicles) {
    var vehicle = template.clone();

    var vehicleData = vehicles[vehicleCode];
    for (var j = 0; j < vehicleData.sensors.length; j++) {
      var sensorData = vehicleData.sensors[j];
      if (sensorData.pres != 0 && sensorData.temp != 0) {
        vehicle.find("div[location='" + sensorData.location + "'] div:first").html(sensorData.pres);
        vehicle.find("div[location='" + sensorData.location + "'] div:last").html(sensorData.temp);
      }
      if (sensorData.highPres || sensorData.lowPres || sensorData.highTemp) {
        vehicle.find("div[location='" + sensorData.location + "']").attr("class", "tire-red");
      } else if (sensorData.lowBattery) {
        vehicle.find("div[location='" + sensorData.location + "']").attr("class", "tire-yellow");
      }
    }
    vehicle.appendTo($("#display-area")).show();
    vehicle.find("div:first").panel({
      title: "Truck: " + vehicleCode,
      tools: [{
        handler: function() {
          var vehicle_code = $(this).parent().parent().find("div[class='panel-title']").html();
        }
      }]
    });
  }
} <
/script>

＆＃13;

<强> HTML

＆＃13;

<body cz-shortcut-listen="true">
  <div id="display-area">
  </div>

  <div id="template">

    <div style="float: left; padding: 5px;" class="model1">
      <div class="panel" style="display: block; width: 210px;">
        <div class="panel-header" style="width: 198px;">
          <div class="panel-title">Truck: 101</div>
          <div class="panel-tool">
            <a href="javascript:void(0)"></a>
          </div>
        </div>
        <div style="padding: 8px; width: 192px; height: 165px;" title="" class="panel-body">
          <div style="width: 100%;height: 70px;background: url(static/images/axel.jpg) no-repeat center;background-size: 115px 15px;">
            <div class="tire-black" style="float: left;" location="1A">
              <div style="font-weight: bold;padding-top: 10px;">106</div>
              <div style="font-weight: bold;padding-top: 10px;">27</div>
            </div>
            <div class="tire-black" style="float: right;" location="1D">
              <div style="font-weight: bold;padding-top: 10px;">108</div>
              <div style="font-weight: bold;padding-top: 10px;">29</div>
            </div>
          </div>
          <br>
          <div style="width: 100%;height: 70px;background: url(static/images/axel.jpg) no-repeat center;background-size: 115px 15px;">
            <div class="tire-black" style="float: left;" location="2A">
              <div style="font-weight: bold;padding-top: 10px;">106</div>
              <div style="font-weight: bold;padding-top: 10px;">32</div>
            </div>
            <div class="tire-black" style="float: left;" location="2B">
              <div style="font-weight: bold;padding-top: 10px;">109</div>
              <div style="font-weight: bold;padding-top: 10px;">34</div>
            </div>
            <div class="tire-black" style="float: left;margin-left: 24px;" location="2C">
              <div style="font-weight: bold;padding-top: 10px;">111</div>
              <div style="font-weight: bold;padding-top: 10px;">37</div>
            </div>
            <div class="tire-black" style="float: right;" location="2D">
              <div style="font-weight: bold;padding-top: 10px;">111</div>
              <div style="font-weight: bold;padding-top: 10px;">36</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

＆＃13;

Answer 2

使用div的全局克隆。然后从页面中删除所有div（.model1）或清空body。

因此，您的函数showView1()需要进行以下修改。

 function showView1(){
                var carClone = $(".model1:first").clone(); //Get element's clone before removing it from body.
                $(".model1").remove(); //Then Remove .model1 DIV from body or Use $("body").empty(); as per your req.
                for(var carCode in cars){
                   var car = carClone.clone(); 
                    var carData = cars[carCode];
                    for(var j = 0;j<carData.sensors.length;j++){
                        var sensorData = carData.sensors[j];
                        if(sensorData.pres!=0&&sensorData.temp!=0){
                            car.find("div[location='"+sensorData.location+"'] div:first").html(sensorData.pres);
                            car.find("div[location='"+sensorData.location+"'] div:last").html(sensorData.temp);
                        }
                        if(sensorData.highPres || sensorData.lowPres || sensorData.highTemp){
                            car.find("div[location='"+sensorData.location+"']").attr("class","tire-red");
                            }else if(sensorData.lowBattery){
                            car.find("div[location='"+sensorData.location+"']").attr("class","tire-yellow");
                        }
                    }
                    car.appendTo($(document.body)).show();
                    car.find("div:first").panel({
                        title:"Truck: " + carCode,
                        tools: [
                        {                              
                            handler:function(){
                                var car_code = $(this).parent().parent().find("div[class='panel-title']").html();
                            }
                        }]
                    });                     
                    }   
        }

在显示新数据之前清楚

2 个答案: