设置显示后如何显示图像;没有

Question

尽管这个问题对专家来说很简单。但作为一个初学者，我并没有找到解决这个问题的正确方法。我在display((函数的innerhtml中设置了image display none，现在在flagsdisplay((函数中，我想将标志图像显示为块。我尝试过各种方式，比如通过课堂，通过onclick显示整个国家的国旗图像，通过id只显示第一面国旗。现在这是我尝试的最后一种方法，但不知道如何在flagsdisplay((函数中编写逻辑。下面我附上了代码。

enter code here
fetch('https://restcountries.com/v3.1/all')
.then(response => response.json())
.then(json => display(json));
function display(datas) {
let parent = document.getElementById("parent");
//let imagediv = document.getElementById("parent1");
datas.forEach(data => {
let div = document.createElement('div');
div.classList.add('list');
div.innerHTML = `
<li>country Nmae: ${data.name.common}</li>
<li>country Continents: ${data.continents[0]}</li>
<li>Total arae: ${data.area}</li>
<img src="${data.flags.png}" alt="" style="display: none">
<button onclick="flagdisplay('${data.flags.png}')">flag</button> `
parent.appendChild(div);
})
}
function flagdisplay(flags) {
`  <img src="${flags}" alt="" style="display: block">` //this is what i want to do
}

Answer 1

如果我理解正确，你的函数flagdisplay应该看起来像这样：

function flagdisplay(flags) {
let imgs = document.getElementsByTagName['img'];

for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src = flags) {
return imgs[i].style.display = 'block';
}
}
}

这将获取网站的所有图像，然后使用for循环对其进行迭代。当图像的src与源flags匹配时，它会将其显示更改为block。但不太确定这是否是你想要的。