我這輩子都想不通！我怎樣才能做到這一點 - 單擊影像時將不透明度設定為 1 并降低其他影像的不透明度？我被告知要向單擊的影像添加一個類，存盤它，然后在單擊另一個影像時洗掉該類？但我想不通！
let items = document.getElementsByClassName("item");
document.body.addEventListener('click', (event) => {
const el = event.target;
for(var i=0; i< smallImg.length; i ) {
if (el.className !== 'sec') return;
const wasSelected = el.classList.contains('selected');
for (const d of document.querySelectorAll('div >img'))
d.classList.remove('selected');
el.classList.toggle('selected', !wasSelected)
console.log(".selected");
}
});.sec:not(:first-child) {
opacity: 0.3;
}
.sec:not:active{
opacity: 0.3;
}<div class="image-container">
<img
src="https://source.unsplash.com/400x400/?stationery"
class="item main-image"
/>
<div class="secondary-image">
<img
src="https://source.unsplash.com/100x100/?pen"
class="item sec item-1 active "
/>
<img
src="https://source.unsplash.com/100x100/?pencil"
class="item sec item-2"
/>
<img
src="https://source.unsplash.com/100x100/?notepad"
class="item sec item-3"
/>
<img
src="https://source.unsplash.com/100x100/?eraser"
class="item sec item-4"
/>
</div>uj5u.com熱心網友回復：
只需選擇當前具有active該類的元素，如果存在這樣的元素，則從中洗掉該類。然后將其添加到單擊的那個。
（目前不包括對單擊的元素是否實際上是這些影像之一的任何檢查。我只是將您的一般單擊處理程式保留為body，請自行改進以僅在需要時應用。）
document.body.addEventListener('click', (event) => {
let el = event.target;
let prev = document.querySelector('.secondary-image .active');
if(prev) {
prev.classList.remove('active');
}
el.classList.add('active');
});.secondary-image .sec:not(.active) {
opacity: 0.3;
}<div class="image-container">
<img
src="https://source.unsplash.com/400x400/?stationery"
class="item main-image"
/>
<div class="secondary-image">
<img
src="https://source.unsplash.com/100x100/?pen"
class="item sec item-1 active "
/>
<img
src="https://source.unsplash.com/100x100/?pencil"
class="item sec item-2"
/>
<img
src="https://source.unsplash.com/100x100/?notepad"
class="item sec item-3"
/>
<img
src="https://source.unsplash.com/100x100/?eraser"
class="item sec item-4"
/>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/435734.html
標籤：javascript 数组 图片库