하나의 이미지를 사용할 수있는 경우 여러 이미지 숨기기

Question

하나의 이미지 만 표시해야하지만 다른 소스의 이미지 일 수있는 페이지가 있습니다.

가능한 모든 소스를 넣었으므로 오류가 발생하지 않습니다. 해당 소스의 이미지가 아닌 경우 숨겨져 있습니다. 문제는 동일한 이미지가 2 또는 심지어 3 개의 서클에서 발견 될 수 있기 때문에 오류 기능이 실행되지 않고 동일한 이미지가 2 ~ 3 번 표시됩니다 (동일한 이미지이지만 다른 소스).

내가 필요한 것은 그 중 하나가 작동하는 경우 나머지 이미지를 숨기는 js 스크립트이지만, img_4와 함께 표시되는 img_01 또는 img_2와 img_3과 함께 img_3 또는 img_01과 같은 img_2와 같은 많은 가능성이 있습니다. 나는이 모든 가능성을 감추는 방법을 모릅니다. 그래서 당신의 도움이 필요한 것입니다.

내 문제를 이해하시기 바랍니다.

감사합니다. :)

<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>  

내가 이런 식으로 뭔가를 사용했습니다 그리고 난 경우에도 모든 이미지

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

Answer 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>