如何以更有效、更短的方式编写Javascript
我已经编写了一些代码，这些代码适用于我创建的并置。作为Javascript的初学者，我以合理的方式编写了它，并且在使用它很长时间后，我能够创建出工作正常的代码。然而，代码是非常重复的，并且比它应该的要长很多，尽管我不确定如何在不破坏它的情况下重写它。我想让fetch只写一次，而不是每次使用它，再加上任何其他可以使代码更紧凑的东西。以下是我编写的代码：如何以更有效、更短的方式编写Javascript,javascript,json,fetch,Javascript,Json,Fetch,我已经编写了一些代码，这些代码适用于我创建的并置。作为Javascript的初学者，我以合理的方式编写了它，并且在使用它很长时间后，我能够创建出工作正常的代码。然而，代码是非常重复的，并且比它应该的要长很多，尽管我不确定如何在不破坏它的情况下重写它。我想让fetch只写一次，而不是每次使用它，再加上任何其他可以使代码更紧凑的东西。以下是我编写的代码： window.addEventListener("load", (event) => { const t
window.addEventListener("load", (event) => {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
var color = jsonObject['color'];
for (var i = 0; i < color.length; i++) {
var buttonColor = i;
if (buttonColor == 0 ) {
document.querySelector(".btn-1").style.backgroundImage = `url(${color[0].smallImage})`;
}
else if (buttonColor == 1 ) {
document.querySelector(".btn-2").style.backgroundImage = `url(${color[1].smallImage})`;
}
else if (buttonColor == 2 ) {
document.querySelector(".btn-3").style.backgroundImage = `url(${color[2].smallImage})`;
}
else if (buttonColor == 3 ) {
document.querySelector(".btn-4").style.backgroundImage = `url(${color[3].smallImage})`;
}
else if (buttonColor == 4 ) {
document.querySelector(".btn-5").style.backgroundImage = `url(${color[0].smallImage})`;
}
else if (buttonColor == 5 ) {
document.querySelector(".btn-6").style.backgroundImage = `url(${color[1].smallImage})`;
}
else if (buttonColor == 6 ) {
document.querySelector(".btn-7").style.backgroundImage = `url(${color[2].smallImage})`;
}
else if (buttonColor == 7 ) {
document.querySelector(".btn-8").style.backgroundImage = `url(${color[3].smallImage})`;
}
else if (buttonColor == 8 ) {
document.querySelector(".btn-9").style.backgroundImage = `url(${color[0].smallImage})`;
}
else if (buttonColor == 9 ) {
document.querySelector(".btn-10").style.backgroundImage = `url(${color[1].smallImage})`;
}
else if (buttonColor == 10 ) {
document.querySelector(".btn-11").style.backgroundImage = `url(${color[2].smallImage})`;
}
else if (buttonColor == 11 ) {
document.querySelector(".btn-12").style.backgroundImage = `url(${color[3].smallImage})`;
}
else if (buttonColor == 12 ) {
document.querySelector(".btn-13").style.backgroundImage = `url(${color[0].smallImage})`;
}
else if (buttonColor == 13 ) {
document.querySelector(".btn-14").style.backgroundImage = `url(${color[1].smallImage})`;
}
}
});
var buttons2 = document.querySelectorAll('.btn');
for (let i = 0; i < buttons2.length; i++) {
buttons2[i].onclick = function () {
let switcher = i;
if (switcher == 0 ) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[0].image)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else if (switcher == 1) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[1].image)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
else if (switcher == 2) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "yellow";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[2].image)
{
image.src = color[2].image;
}
else
{
image.src = color[2].image;
}
};
});
}
else if (switcher == 3) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "green";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[1].image)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
};
});
}
else if (switcher == 4) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[2].image)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else if (switcher == 5) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[1].image)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
else if (switcher == 6) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "yellow";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[2].image)
{
image.src = color[2].image;
}
else
{
image.src = color[2].image;
}
};
});
}
else if (switcher == 7) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "green";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[1].image)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
};
});
}
else if (switcher == 8) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[2].image)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else if (switcher == 9) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[1].image)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
else if (switcher == 10) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "yellow";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[2].image)
{
image.src = color[2].image;
}
else
{
image.src = color[2].image;
}
};
});
}
else if (switcher == 11) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "green";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[1].image)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
};
});
}
else if (switcher == 12) {
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[2].image)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else{
const t = "js/test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementById("color-title").innerHTML = name;
var image = document.getElementById('bigpic');
if (image.getAttribute('src') !== color[3].image)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
}
}
})
window.addEventListener（“加载”，（事件）=>{
const t=“js/test.json”
取回（t）
.然后（功能（响应）{
返回response.json（）；
})
.then（函数（jsonObject）{
var color=jsonObject['color']；
对于（变量i=0；i