当图像未加载时隐藏图像和同级元素

Question

抱歉，这个问题可能已经得到解答，但我找不到。

我试图使用以下方法隐藏损坏的外部图像

$("img").on("error", function() {

    $(this).hide();

});

它工作得很好，但他们在div区块内的标题仍然显示

<div class="something" data-gallery="0">

    <div class="something" data-bg="image_url" >    

        <img src="image_url" alt='something here" referrerpolicy="no-referrer" title="something here'/>

        <div class="something_title" >

            <h3>The title</h3>

        </div>

    </div>              

</div>

我的问题是，我似乎无法找到隐藏标题的方法

<div class="something_title" >

    <h3>The title</h3>

</div>

在本节中，用户看不到图像，但他们看到标题，而在图库中，这对他们来说没有任何意义。

Answer 1

只需使用 DOM 遍历来定位父（包装）元素：$(this).closest('.something').hide();您还可以直接单独定位同级：$(this).hide(); $(this).siblings('.something_title').hide();不过，我发现第一个选项更简单，并且它往往可以消除涉及包装器上剩余边距和填充的问题。