img = document.createElement("img");
img.setAttribute("src", item.image);
var imgCosmo = document.createElement("img");
imgCosmo.setAttribute("src", item.setupCosmo.cosmoImage);
我有以下JSON
{
"saintName": "Athena",
"category": "SS",
"skillPrio": "1231 > 1233 > 1243 > 1443 > 1445 > 1455 > 3455 > 3555 > 4555",
"setupCosmo": [
{
"cosmoName": "Felina",
"cosmoImage": "img/lg-felina.jpg"
},
{
"cosmoName": "Marsh",
"cosmoImage": "img/lg-marsh-fairy.jpg"
},
{
"cosmoName": "Decelerator",
"cosmoImage": "img/lg-decelerator.jpg"
},
{
"cosmoName": "Rosary",
"cosmoImage": "img/sol-rosary.jpg"
},
{
"cosmoName": "CStone",
"cosmoImage": "img/sol-cstone"
},
{
"cosmoName": "Tenacity",
"cosmoImage": "img/lu-tenacity.jpg"
},
{
"cosmoName": "Knowing",
"cosmoImage": "img/lu-knowing.jpg"
},
{
"cosmoName": "SpiritPrint",
"cosmoImage": "img/lu-spirit.jpg"
},
{
"cosmoName": "Humming",
"cosmoImage": "img/st-humming.jpg"
},
{
"cosmoName": "Moon",
"cosmoImage": "img/st-moon.jpg"
}
],
"topSubstats": "Speed > Cdmg > Catk% > HP% = Catk flat > HP flat",
"image": "img/ss-athena.jpg"
}
而且我有以下JS
const buttons = document.querySelectorAll(".caba-button");
let data = [];
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
const dataArray = JSON.parse(this.responseText);
data = dataArray; //otorgando a data los valores del json para usarlos mas comodamente
}
};
xmlhttp.open("GET", "../json/saints.json", true);
xmlhttp.send();
/*Getting saints cosmos on click*/
buttons.forEach((button) => {
button.addEventListener("click", (event) => {
checkSaint(button.previousElementSibling.innerHTML); //getting the name of the saint that was clicked
});
});
function checkSaint(saint) {
data.forEach((item) => {
if (saint == item.saintName) {
var div = document.createElement("div");
div.className = "modal";
var div2 = document.createElement("div");
div2.className = "modal-content";
var img = document.createElement("img");
img.setAttribute("src", item.image);
var imgCosmo = document.createElement("img");
imgCosmo.setAttribute("src", item.setupCosmo);
var p = document.createElement("p");
var h3 = document.createElement("h3");
var span = document.createElement("span");
span.className = "close";
var spanContent = document.createTextNode("X");
var saintNames = document.createTextNode(
item.saintName + " " + item.category
);
var newContent = document.createTextNode("Cosmos: " + item.setupCosmo);
div.appendChild(div2);
div2.appendChild(span);
span.appendChild(spanContent);
div2.appendChild(img);
div2.appendChild(h3);
h3.appendChild(saintNames);
div2.appendChild(p);
p.appendChild(newContent);
var currentDiv = document.getElementById("main");
document.body.insertBefore(div, currentDiv);
var body = document.querySelector("body");
body.classList.toggle("modal-open");
span.onclick = function () {
div.remove();
body.classList.remove("modal-open");
};
window.onclick = function (event) {
if (event.target == div) {
div.remove();
body.classList.remove("modal-open");
}
};
}
});
}
我想做的是调用特定的setupCosmo图像,并将其全部显示在模式创建中,实际上,我可以看到第一个图像,文本和其他内容。但是,当我尝试从Js调用setupCosmo时,仅显示此Modal show
我在这里可以做什么?我是Json的真正新手,请学习[]
我具有以下JSON {“ saintName”:“ Athena”,“ category”:“ SS”,“ skillPrio”:“ 1231> 1233> 1243> 1443> 1445> 1455> 3455> 3555> 4555”,“ setupCosmo ”:[{... ...>
data = dataArray
中,您将json对象分配给数组,将其从data = dataArray
更改为data.push(dataArray)
,在此行中将其从data.forEach
更改为data[0].forEach
img = document.createElement("img");
img.setAttribute("src", item.image);
var imgCosmo = document.createElement("img");
imgCosmo.setAttribute("src", item.setupCosmo.cosmoImage);
一种不同的方法是遍历所有图像链接,并像这样将它们赋予src
data[0].setupCosmo.map(x=>x.cosmoImage).forEach(imgsrc=>{
var imgCosmo = document.createElement("img");
imgCosmo.setAttribute("src", imgsrc);
})
img = document.createElement("img");
img.setAttribute("src", item.image);
var imgCosmo = document.createElement("img");
imgCosmo.setAttribute("src", item.setupCosmo.cosmoImage);