#javascript #html
#javascript #HTML
Вопрос:
Итак, мне удалось заставить изображения, которые я установил в том же классе, загружать соответствующие полноразмерные изображения при нажатии.
Однако я вспомнил, что видел, что есть способ упростить его еще больше?
Это то, что у меня есть до сих пор, это работает нормально, но просто нужно упростить для удобства:
**The HTML:**
<div class="section-waterSustains" id="water_Sustains">
<h3>How water sustains nature</h3>
<br>
<div class="waterSustains_collagesht">
<!----Creating the collage picture-->
<div class="waterSustains_collagepic">
<img class="ws-collagePic" id="collagePic1" src="images/africa-deer-drinking-water-preview.png">
<img class="ws-collagePic" id="collagePic2" src="images/Frog_During_Rain_preview.png">
<img class="ws-collagePic" id="collagePic3" src="images/Bird_drinking_Water_preview.png">
<img class="ws-collagePic" id="collagePic4" src="images/12_YT_SPARROW_preview.png">
<img class="ws-collagePic" id="collagePic5" src="images/Fishes-swiming-preview.png">
<img class="ws-collagePic" id="collagePic6" src="images/kitten_watching_rain_drops_roll_down_window_preview.png">
</div>
<p class="waterSustains_collageCaption">Click the Animals and Plants to see how they interact with Nature everyday!</p>
</div>
<!-----Creating Overlay and full image-->
<div id="overlayCollage01" class="collageOverlay">
<sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
<img class="overlay-Content" id="img01" src="images/africa-deer-drinking-water.jpg">
</div>
<div id="overlayCollage02" class="collageOverlay">
<sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
<img class="overlay-Content" id="img01" src="images/Frog_During_Rain_Wallpaper.jpg">
</div>
<div id="overlayCollage01" class="collageOverlay">
<sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
<img class="overlay-Content" id="img01" src="images/Bird_drinking_Water.jpg">
</div>
<div id="overlayCollage01" class="collageOverlay">
<sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
<img class="overlay-Content" id="img01" src="images/12_YT_SPARROW_1391748f.jpg">
</div>
<div id="overlayCollage01" class="collageOverlay">
<sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
<img class="overlay-Content" id="img01" src="images/pexels-harrison-haines-3536511.jpg">
</div>
<div id="overlayCollage01" class="collageOverlay">
<sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
<img class="overlay-Content" id="img01" src="images/kitten_watching_rain_drops_roll_down_window_9028683602.jpg">
</div>
</div>
----------------------End HTML-------------------------------------
**The Javascript:**
/*--------Creating Modal images for How Water sustains nature Collage-------*/
//Get Overlay
var overlay = document.querySelectorAll(".collageOverlay");
//Get image.
var collageImg = document.querySelectorAll(".ws-collagePic");
//Get overlay to be active on clicking on image
collageImg[0].onclick = function() {
overlay[0].style.display = "block";
}
collageImg[1].onclick = function() {
overlay[1].style.display = "block";
}
collageImg[2].onclick = function() {
overlay[2].style.display = "block";
}
collageImg[3].onclick = function() {
overlay[3].style.display = "block";
}
collageImg[4].onclick = function() {
overlay[4].style.display = "block";
}
collageImg[5].onclick = function() {
overlay[5].style.display = "block";
}
//Get icon button (x) that closes Overlay
var overlayClose = document.querySelectorAll("#overlay-CloseBtn");
// When the user clicks on icon button (x), close the overlay
overlayClose[0].onclick = function() {
overlay[0].style.display = "none";
}
overlayClose[1].onclick = function() {
overlay[1].style.display = "none";
}
overlayClose[2].onclick = function() {
overlay[2].style.display = "none";
}
overlayClose[3].onclick = function() {
overlay[3].style.display = "none";
}
overlayClose[4].onclick = function() {
overlay[4].style.display = "none";
}
overlayClose[5].onclick = function() {
overlay[5].style.display = "none";
}
--------------------------END Javascript--------------------------
Спасибо, друзья!
Комментарии:
1. Вы говорите о делегировании событий, просто добавьте прослушиватель для родительского элемента кнопок и проверьте, является ли выбранная цель элементом кнопки, а затем покажите правильное изображение
Ответ №1:
Используйте forEach() метод при работе с массивом класса. Я предоставил упрощенный метод для вашего кода с использованием forEach() методов.
var overlay = document.querySelectorAll(".collageOverlay");
var collageImg = document.querySelectorAll(".ws-collagePic");
var overlayClose = document.querySelectorAll("#overlay-CloseBtn");
Array.from(collageImg).forEach(function(collageImgArray, i) {
collageImgArray.addEventListener('click', function() {
overlay[i].style.display = "block";
});
});
Array.from(overlayClose).forEach(function(overlayCloseArray, i) {
overlayCloseArray.addEventListener('click', function() {
overlay[i].style.display = "none";
});
});
Комментарии:
1. рад вам помочь
Ответ №2:
Вот простая версия:
let imgElement = document.querySelector("#overlay-image");
document.querySelector("#buttons-container").onclick = function(e) {
if(e.target.nodeName === "BUTTON") {
let imageName = e.target.getAttribute("data-image-name");
imgElement.src = "somepath" imageName;
// only for demonstration since we have no real images
imgElement.alt = imageName;
}
} <div id="buttons-container">
<button data-image-name="img15">show Image 15</button>
<button data-image-name="img27">show Image 27</button>
<button data-image-name="img3">show Image 3</button>
<button data-image-name="img5">show Image 5</button>
<button data-image-name="img11">show Image 11</button>
</div>
<img id="overlay-image" src="" alt="no image">