这个块的更多功能编码方式？

Question

我正在从3个不同的链接中读取此颜色值，并将其设置为某些div的背景颜色。我想知道的是，如果有更好的方法，我将不必重复自我。现在只有它的颜色值，但是对于下一步，我必须阅读一个包含更多信息的json文件。谢谢你！

$(function() {
    $.getJSON("url", function(receiveStatusPravdev01){
      var colorBox1 = receiveStatusPravdev01.status;
      $('#box1').css('background', colorBox1);
    });
    $.getJSON("url", function(receiveStatusPravdev02){
      var colorBox2 = receiveStatusPravdev02.status;
      $('#box2').css('background', colorBox2);
    });
    $.getJSON("url", function(receiveStatusPravdev03){
      var colorBox3 = receiveStatusPravdev03.status;
      $('#box3').css('background', colorBox3);
    });
});

Answer 1

你想要它功能吗？使用function！

$(function() {
  function loadAndSetColor(url, selector) {
    $.getJSON(url, function(receiveStatusPravdev){
      var colorBox = receiveStatusPravdev.status;
      $(selector).css('background', colorBox);
    });
  }
  loadAndSetColor("url", '#box1');
  loadAndSetColor("url", '#box2');
  loadAndSetColor("url", '#box3');
});

Answer 2

您可以减少进行AJAX调用和更改颜色的冗余。

function changeColor(el, response) {
  $(el).css('background', response.status);
}
 
[
  {url: "url1", box:"#box1"}, 
  {url: "url2", box:"#box2"}, 
  {url: "url3", box:"#box3"}
].forEach(data => {
  $.getJSON(data.url, function(response) {
    changeColor(data.box, response)
  });
});