javascript - 如果div包含img且src包含x，则隐藏div？

Question

如果 id=module-120 的 div 包含一个图像，其源包含:completion-auto-y 我想隐藏该父 div 模块120。

这是我所知道的，但它不起作用。

if (document.getElementById('#module-120')) {

    function verifyImageURL(url, callBack) {
        var img = new Image();
        img.src = url;
        img.onload = function () {
            callBack(true);
        };
        img.onerror = function () {
            callBack(false);
        };
    }

    var url = "completion-auto-y";
    verifyImageURL(url, function (imageExists) {
        if (imageExists === true) {
             document.getElementById('#module-120').style.display="none";
        } 
    });     
}

我认为问题出在 var url = "completion-auto-y" 中。有人知道如何解决这个问题吗？

Answer 1

首先，让我们明确一点，您应该只拥有一个具有给定 id 的元素，因此您最多只需要隐藏一个元素。

所以，解决方案是使用 .querySelector()与适当的 CSS 选择器一起获取对具有应隐藏父级的图像的引用。然后隐藏父元素。

// Get the image that matches the criteria
let match = document.querySelector("div[id='module-120'] img[src*='completion-auto-y']");

match.parentNode.classList.add("hidden");  // Hide the parent element

.hidden { display:none; }

<div id="module-120">
 <img src="completion-auto-x">
 I should not be hidden
</div>
<div id="module-120">
 <img src="completion-auto-y">
 I should be hidden
</div>