如果一张图像可用，则隐藏多张图像答案

【问题标题】：Multiple image hidding if one image is available如果一张图像可用，则隐藏多张图像
【发布时间】：2017-11-30 13:40:18
【问题描述】：

我有一个页面只需要显示一张图片，但图片可以来自不同的来源。

我已经把所有可能的来源和onerror，如果图像不是来自那个来源，它就会被隐藏。问题是有时在 2 甚至 3 个 src 中可以找到相同的图像，因此不会运行 onerror 函数，并且在页面上显示相同的图像 2 或 3 次（相同的图像但不同的来源）

我需要的是一个 js 脚本，如果其中一个正在工作，它会隐藏其余的图像，但是有很多可能性，例如：img_01 与 img_4 或 img_2 与 img_3 或 img_01 与 img_2 和 img_3 一起显示。我不知道如何涵盖所有这些可能性，所以我需要你的帮助。

希望你能理解我的问题

谢谢！ :)

<div class="col-md-12" style="padding: 0px; margin-bottom: 20px;">
                                    <img id="img_01" src="im/wall/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>

                                    <img id="img_2" src="im/ceiling/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>

                                    <img id="img_3" src="im/floor/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>
                                    <img id="img_4" src="im/collections/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>                           
                            </div>

我用过类似的东西，我什至尝试将它放在所有图像的 if 中

$('#img_01').on('load', function(){
// hide/remove the loading image
$('#img_2, #img_3, #img_4').hide();

【问题讨论】：

是的，了解您的问题到目前为止您尝试了什么？
如果尝试过这样的事情： $('#img_01').on('load', function(){ $('#img_2, #img_3, #img_4').hide();
可以使用您编写的 javascript 编辑您的问题！
你的代码不是那么可读，所以无论如何，这是常见的情况。当您获得所需的图像时，您必须为所有图片设置带有 css 属性 display:none 的类，然后为下载的图片设置带有 display:block 的类。

标签： javascript jquery html image show-hide

【解决方案1】：

const my_imgs = document.getElementsByClassName('my_img');

const handler = function(e){
  remove_handler();
  e.target.classList.remove('hidden');
}

const remove_handler = function(){
  for(let i=my_imgs.length; i--; ) {
    my_imgs[i].removeEventListener('load', handler);
  }
}

for(let i=my_imgs.length; i--;){
  my_imgs[i].addEventListener('load', handler);
}

.my_img {
  width:200px;
}
.hidden {
  display:none;
}

<div class="container">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/TWTNM0XMX9.jpg">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/L6QLZEGPXB.jpg">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/FH3TLO40EI.jpg">
</div>

【讨论】：