这个块的更多功能编码方式？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这个块的更多功能编码方式？相关的知识，希望对你有一定的参考价值。
我正在从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);
});
});
答案
你想要它功能吗？使用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');
});
另一答案
您可以减少进行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)
});
});以上是关于这个块的更多功能编码方式？的主要内容，如果未能解决你的问题，请参考以下文章