如果其中的图像不存在，则隐藏部分
如果其中的图像不存在，则隐藏部分
提问于 2020-10-28 23:21:15
我有一个包含更多部分的HTML代码，如下所示：
<section class="grid-1">
<div class="item-2">
<div class="item-6">
<img src="../img/image1.png" onclick="openModal();currentSlide(4)" class="hover-shadow cursor" style="display: none;">
</div>
<div class="item-6">
<img id="currentPhoto" src="../img/image2.png" onclick="openModal();currentSlide(5)" class="hover-shadow cursor" style="display: none;">
</div>
<div class="item-6">
<img id="currentPhoto" src="../img/image3.png" onclick="openModal();currentSlide(6)" class="hover-shadow cursor" style="display: none;">
</div>
</div>
</section>从下面的代码添加了style="display: none;“：
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});但是，如果不是所有的图像源都可用，是否可以隐藏所有节类grid-1？
回答 1
Stack Overflow用户
发布于 2020-10-28 23:52:52
您可以向未加载的图像添加一个类(如果可以，也可以添加一个data-attribute )，然后将它们与网格中的总图像数量进行比较。
function checkGrid(image) {
const grid = image.closest('section');
const gridImages = grid.querySelectorAll('img');
const gridImagesWithError = grid.querySelectorAll('img.invalid-src');
if(gridImagesWithError.length === gridImages.length) {
grid.style.display = 'none';
}
}
document.addEventListener("DOMContentLoaded", function(event) {
const images = document.querySelectorAll('img');
images.forEach(function(image) {
image.onerror = function() {
this.classList.add('invalid-src');
this.style.display = 'none';
checkGrid(this);
};
});
});虽然这是可行的，但为了检查多个网格，建议您向网格添加一个类，这样查询选择器就不必完全依赖于节标记，这可能是不安全的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64575937
复制相关文章
相似问题
腾讯云开发者
