我嘗試為網站做一個模態畫廊。實際上它幾乎可以作業。它打開了我的照片，但只打開了畫廊的最后一張。我知道我需要選擇在我的 JS 中點擊的圖片，但我真的不知道該怎么做。
我有（部分）：
HTML
<section>
<ul class="gallery">
<li>
<img src="images/arcticfox/Arctic_1.jpg" alt="Arctic Fox" />
</li>
</ul>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</section>
CSS
.gallery {
margin: 0;
padding: 0;
grid-gap: 10px;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
JS
const modal = document.getElementById("myModal");
const img = document.querySelectorAll(".gallery li img");
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
const span = document.getElementsByClassName("close")[0];
const gallery = document.querySelector(".gallery")
gallery.addEventListener("click", () => {
img.forEach(imgs => {
console.log(imgs)
modal.style.display = "block";
modalImg.src = imgs.src;
captionText.innerHTML = imgs.alt;
})
})
span.onclick = function() {
modal.style.display = "none";
}
modal.onclick = function() {
modal.style.display = "none";
}
我知道問題出在我的 JS 上，但我不知道如何選擇正確的圖片。
你能幫助我嗎 ？提前致謝。
uj5u.com熱心網友回復：
看起來您確實非常接近，如果沒有您的 HTML，很難判斷這是否可行，但請嘗試使用它而不是 gallery.addEventListener
document.querySelectorAll('.gallery li img').forEach(item => {
item.addEventListener('click', event => {
modal.style.display = "block";
modalImg.src = item.src;
captionText.innerHTML = item.alt;
})
})
現在你告訴JS：
- 當我點擊圖庫上的任何地方時，我希望您回圈瀏覽
img圖庫中的每個標簽 - 然后
img用這個 current更新 modals屬性img。
當回圈結束時，它總是會離開帶有畫廊中最后一張影像屬性的模態。
這個新函式告訴 JS：
- 我希望你獲得畫廊中的所有影像并回圈瀏覽它們
- 然后我希望你為每個專案單獨添加一個事件監聽器
- 當我單擊一個專案時，我希望您打開模態，并使用該專案的屬性更新模態影像。
您可能需要稍微調整一下，但您面臨的問題是您沒有告訴 JS 哪些屬性是您想要的。
另一種方法是使用您需要的資料向圖庫中的影像添加自定義資料屬性。然后撰寫一個函式來獲取這些屬性并更新模態。這樣做的原因是您可以在圖庫上加載縮略圖大小，并在模態上鏈接到全解析度影像。它看起來像這樣。
<li class="gallery-item" modal-src="https://fullImageURL.com" modal-caption="Caption Text Here">
<img src="https://thumbnailURL.com"/>
</li>
document.querySelectorAll('.gallery-item').forEach(item => {
item.addEventListener('click', event => {
updateModal(item);
})
})
function updateModal(item) {
const src = .getAttribute('modal-src');
const caption = .getAttribute('modal-caption');
modal.style.display = "block";
modalImg.src = src;
captionText.innerHTML = caption;
}
uj5u.com熱心網友回復：
是的，喬納森·諾爾（Jonathan Knoll）作業，非常感謝。周二第一個對我的專案來說已經足夠了，我已經將 JS 升級到：因為已經有一個用于 querySelector 的常量
const img = document.querySelectorAll(".gallery li img");
img.forEach(item => {
item.addEventListener('click', event => {
modal.style.display = "block";
modalImg.src = item.src;
captionText.innerHTML = item.alt;
})
})
HTML 和 CSS 現在在帖子中。（部分的）
再次感謝您，這是一個很大的幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/375506.html
標籤：javascript html css