Question

我有以下.js代码，它读取json文件以每分钟更新html中的值。

$(document).ready(updateData);
function updateData() {
    $.ajaxSetup({ cache: false });
    $.getJSON("data/data.json", function(result){
        $('#id1').empty();
        $('#id1').append(result.id1);
        $('#id2').empty();
        $('#id2').append(result.id2);
        $('#id3').empty();
        $('#id3').append(result.id3);
        $('#id4').empty();
        $('#id4').append(result.id4);
        $('#id5').empty();
        $('#id5').append(result.id5);
        $('#id6').empty();
        $('#id6').append(result.id6);
        $('#id7').empty();
        $('#id7').append(result.id7);
        $('#id8').empty();
        $('#id8').append(result.id8);
        $('#id9').empty();
        $('#id9').append(result.id9);
    });
    setTimeout(updateData, 60000);
}

可以使用$ .each（）函数以较短的方式重写吗？

Answer 1

您可以使用循环：

var i;
for (i = 1; i <= 9; i++) {
    $('#id'+i).html(result['id'+i]);
}

Answer 2

可以使用简单的for循环进行改进：

$.ajaxSetup({ cache: false }); // 1
$(document).ready(updateData);

function updateData() {
  $.getJSON("data/data.json", function(result) {
    for (var i = 1; i<= 9; i++) {
      $('#id' + i).empty().append(result['id' + i]); // 2
    }

    setTimeout(updateData, 60000); // 3
  });
}

但是，通过连接ID访问DOM看起来不太好例如，您可以尝试使用CSS类和data - 属性来实现它。

一些小改进：

ajaxSetup只能初始化一次，您不需要每次都调用它。
您可能不需要同时empty()和append()。如果是文字，则只需使用.text()或.html()即可获得HTML。
最好在setTimeout回调中调用getJSON，以便在上一个请求完成后60秒内更新数据，最好在{{1}处理程序。想象一下，你的一个客户端连接速度非常慢，加载这个JSON需要60多秒。这将导致意想不到的结果。

Answer 3

for(var i =1;i<=9;i++){
$('#id'+i).empty();
$('#id'+i).append(result.id+1); }

这将开始工作

Answer 4

使用$.each

多一点jQuery'ish

$(document).ready(updateData);

function updateData() {
    $.ajaxSetup({
        cache: false
    });
    $.getJSON("data/data.json", function(result) {
        $.each("123456789".split(""), function(_,i) {
            $('#id'+i).html(result['id'+i));
        });
    }); 

    setTimeout(updateData, 60000);
}

使用$ .each函数缩短js脚本

4 个答案: