Как лучше всего создавать связи между динамически генерируемым HTML-содержимым с помощью JavaScript? Например, у меня есть несколько эскизов изображений на домашней странице, которые должны открыть соответствующий проект ...

1
wrgt 8 Янв 2021 в 17:41

1 ответ

Лучший ответ

Не вижу ничего плохого в вашем коде, я тоже пробовал по-другому

Надеюсь, ты тоже взглянешь на то же самое

const thumbnail = document.querySelectorAll(".thumbnail");
const project = document.querySelectorAll(".project");

thumbnail.forEach(function (thumb) {
    thumb.addEventListener("click", (e) => {        
        const target = e.target.classList[1];
        project.forEach(function (pro) {
            pro.style.visibility = "hidden";
            if( pro.classList.contains(target)){
              pro.style.visibility = "visible";
            }
        });        
    });
});
#thumbnails, #projects {
  position: relative;
  display: flex;
}

.thumbnail, .project {
  height: 100px;
  width: 100px;
  margin: 10px;
}

.thumbnail {
  background: #FF7400;
  cursor: pointer;
}

.project {
  visibility: hidden;
  background: #209209;
}
<div id="thumbnails">
  <div class="thumbnail project1">Thumbnail (Project 1)</div>
  <div class="thumbnail project2">Thumbnail (Project 2)</div>
  <div class="thumbnail project3">Thumbnail (Project 3)</div>
</div>
<div id="projects">
  <div class="project project1">Project 1</div>
  <div class="project project2">Project 2</div>
  <div class="project project3">Project 3</div>
</div>
0
Onkar 8 Янв 2021 в 15:14