Javascript:图像错误处理和嵌套

Question

我想要一个错误处理脚本。如果找不到图像，请删除(或隐藏)加载失败的标签。我将不胜感激任何帮助!

HTML DOM:

<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
    <div class="swiper-slide-inside ">
        <div class="align-vertical">
            <img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
        </div>
    </div>
</div>

JS:

document.querySelectorAll(".swiper-slide .img-responsive")[0].addEventListener("error", myFunction);

function myFunction() {
    console.log('Image not found.');
    document.querySelectorAll('.swiper-slide')[0].style.visbility = "hidden";
}

Answer 1

有几个问题

• img 标记没有您在选择器中使用的类
• 您尝试先隐藏 swiper-slide，而不是父级 swiper-slide

演示

document.querySelectorAll(".swiper-slide img")[0].addEventListener("error", myFunction);

function myFunction(event) {
    console.log('Image not found.');
    //use document.querySelector('.swiper-slide').style.display = "none" if there is only one such element and discard below line
    event.target.parentNode.parentNode.parentNode.style.display = "none";
}

<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
    <div class="swiper-slide-inside ">
        <div class="align-vertical">
            <img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
        </div>
    </div>
</div>