Отображение одного изображения и соответствующей информации одновременно с vanilla javascript

Question

Я использую API для подачи информации и изображений. Эти изображения отображаются в сетке, при нажатии на боковое меню открывается и показывает изображение с информацией. Изображения и информация поступают с отдельных URL-адресов, но я обошел эту проблему, используя свойство primary_image_id в качестве идентификатора / класса, поскольку оно одинаково как для изображения, так и для информации.

В настоящее время, когда я нажимаю на изображение, изображение и информация отображаются в боковом меню по желанию, но когда я щелкаю второе изображение, я хочу, чтобы первое изображение go вернулось к «display: none». Я прочитал несколько способов сделать это с помощью событий щелчка, но так как я хочу, чтобы это работало на щелчке другого элемента, он не работает.

Мой код -

var URL = new Array();
URL[0] = "https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45";
URL[1] = "https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=45";
URL[2] = "https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=90";
var nRequest = new Array();
for (var i=0; i<3; i++){
   (function(i) {
      nRequest[i] = new XMLHttpRequest();
      nRequest[i].open("GET", URL[i], true);
      nRequest[i].onreadystatechange = function (oEvent) {
         if (nRequest[i].readyState === 4) {
            if (nRequest[i].status === 200) {
              var data = JSON.parse(nRequest[i].responseText);
              var url = 'http://media.vam.ac.uk/media/thira/collection_images/';
              for (let key in data.records) {
                  let value = data.records[key];
                  let image = value.fields.primary_image_id;
                  let res = image.substr(0, 6);
                  document.querySelector(".image").innerHTML += '<a class="wallImageLink" onclick="openNav();"><img id="' + value.fields.primary_image_id + '" class="wallImage" src="' + url + res + '/' + image + '.jpg"></a>';
                  document.querySelector(".mypanel").innerHTML += '<div class="' + value.fields.primary_image_id + ' imageInfo"> <img class="navImage" src="' + url + res + '/' + image
                  + '.jpg"> <p> <span style="font-weight:bold">Title: </span>' + value.fields.title + '</p>' +
                  '<p> <span style="font-weight:bold">Artist: </span>' + value.fields.artist + '</p>' +
                  '<p> <span style="font-weight:bold">Object Type: </span>' + value.fields.object + '</p>' +
                  '<p> <span style="font-weight:bold">Location: </span>' + value.fields.location + '</p>' +
                  '<p> <span style="font-weight:bold">Place: </span>' + value.fields.place + '</p>' +
                  '<br> </div>';
                  document.querySelector(".image").onclick=function(e){
          		        if(document.querySelector(".active"))document.querySelector(".active").classList.remove("active");
          					e.target.classList.add("active");
                    document.querySelectorAll('.wallImage').forEach(function(el){
                    el.addEventListener('click', function() {

var scanName = this.id;
var blocked =  document.getElementsByClassName(scanName)[0];

blocked.classList.add('block');





                    });
                  });


                  }

          }

        } else {
              console.log("Error", nRequest[i].statusText);
            }

         }


      };
      nRequest[i].send(null);

   })(i);

};

function openNav() {
document.getElementById("mySidenav").style.width = "50%";
document.getElementById("inline-flex").style.display= "inline-flex";
document.getElementById("image").style.width= "50%"
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("image").style.width= "100%"

}

body {
overflow-x:hidden;
height: 100%;
}
.image img {
height: 215px;
width: 20%;
object-fit: cover;
opacity: 0.5;
}

.image img:hover, .image img:focus, .image img:active {
opacity: 1;
}

.active{
opacity: 1 !important;
}

.mypanel {
width: 50%;
}

.mypanel div {
display: none;
}

.mypanelShow {
display: block!important;
}
.image {
  height: 450px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.imageInfo {
  display: none;
}

.sidenav {
height: 450px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: black;
text-decoration: none;
font-weight: bold;
font-size: 4em;
}

.sidenav .closebtn:hover {
  color: green;
}

.navImage {
  max-height: 400px;
  max-width: 400px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.block {
  display: block!important;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="wall.css" media="all" />
     <script src="assets/jquery.min.js"></script>
</head>

<body>
  <div id="inline-flex">
    <div class="image" id="image"></div>
    <div id="mySidenav" class="sidenav mypanel">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    </div>
</div>
    <div class="mypanel2"></div>
  <script src="wall.js"></script>

</body>
</html>

Answer 1

Насколько я понимаю, вы хотите отображать информацию только справа от изображения, которое было нажато в последний раз. Если это так, вы можете просто создать свои элементы, которые показаны справа (img и p et c) и изменить src для изображения и .innerHTML для текста каждый раз, когда новый изображение кликнуло.

Answer 2

После дня, пытавшегося решить эту проблему, я справился через 5 минут после публикации справки. Я использовал это -

if (document.querySelector (". Block")) document.querySelector (". Block"). ClassList.remove ("block"); blocked.classList.add ( 'блок');