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

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

您可以减少进行 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)
  });
});

Answer 2

你想要它的功能吗？使用 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');
});

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

more functional way of coding this block?

javascript

jquery

json

functional-programming

getjson