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

我有以下.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（）函数以较短的方式重写它吗？

来源

2016-11-18 user3826891

您可以使用多个选择作为'$（'＃ID1，ID2＃，＃ID3 ，＃id4，＃id5，＃id6，＃id7，＃id8，＃id9'）。empty（）;'。如果只有'results' JSON中的项目，您可以迭代它并使用带'＃'的键作为ID选择器。 – Tushar

除了'{'id1'：'..'，id2：'..'，...}'之外还有其他的东西吗？ –

如果代码工作正常，并且您希望查看代码，[codereview.se]是最好的网站。但在此之前，请参阅[Stack Overflow用户的代码审阅指南]（// meta.codereview.stackexchange.com/q/5777）和[适用于迁移到Code Review的哪些问题，以及过程如何工作？]（//meta.codereview.stackexchange.com/q/1687） – Tushar

它可以通过一个简单的循环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回调，使得其前一个请求完成，在.always()处理好后更新在60秒内的数据。想象一下你的一个客户端连接速度很慢，加载这个JSON需要60秒以上的时间。这将导致意想不到的结果。

来源

2016-11-18 03:07:11

这工作得很好。另外，感谢您的额外帮助！ html（）函数完全符合我的需求，它实际上帮助我添加了额外的功能。 – user3826891

您可以使用一个循环：

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

来源

2016-11-18 03:06:28 user2182349

不是'.replaceWith（..）'，而是'.html（...）'因为OP想要原始元素。 –

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

这上班

来源

2016-11-18 03:10:45

多一点jQuery'ish，使用$.each

$(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); 
}

来源

2016-11-18 03:12:01 adeneo

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

回答

相关问题