使用$ .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腳本

回答

相關問題