Saya mendapatkan gambar dengan lebar dan tinggi yang sama dan onclick seharusnya menjadi lebih besar, jadi saya membuat fungsi dengan eventlistener untuk itu tetapi sekarang ini memberi tahu saya bahwa gaya tidak ditentukan dan saya tidak melihatnya masalah. Saya mengatur gaya di dalam tag img dan juga tanpa gaya.

<img class="painting" src="<%= post.paintingsP %>" />
    <img class="painting" style="max-width: 20%; min-width: 300px; height: 250px;"src="<%= post.paintingsP2 %>" />

File js

const paint = document.getElementsByClassName('painting');
let flag = true;

for (var i = 0; i < paint.length; i++) {
    paint[i].style.maxWidth = '20%';
    paint[i].style.height = '250px';
    paint[i].style.minWidth = '300px';

    paint[i].addEventListener('click', () => {
        if (flag == true && window.innerWidth >= 769) {
            paint[i].style.maxWidth = '95vw';
            paint[i].style.height = 'auto';

            flag = false;
        } else if (flag == true && window.innerWidth < 769) {

        } else {
            paint[i].style.maxWidth = '20%';
            paint[i].style.minWidth = '300px';
            paint[i].style.height = 'auto';
            flag = true;
        }
    })
}

Jika saya mencoba menggunakan getelementById semuanya berfungsi dengan baik tetapi saya tidak ingin untuk setiap gambar eventlistener.

0
Dariun 8 Maret 2020, 15:34

1 menjawab

Jawaban Terbaik

Gunakan event.target dalam fungsi eventlistener untuk menemukan gambar yang diklik.

const paint = document.getElementsByClassName('painting');
let flag = true;

for (var i = 0; i < paint.length; i++) {

    paint[i].style.maxWidth = '20%';
    paint[i].style.height = '250px';
    paint[i].style.minWidth = '300px';

    paint[i].addEventListener('click', (event) => {
    console.log(event.target)
        if (flag == true && window.innerWidth >= 769) {
           event.target.style.maxWidth = '95vw';
           event.target.style.height = 'auto';

            flag = false;
        } else if (flag == true && window.innerWidth < 769) {

        } else {
            event.target.style.maxWidth = '20%';
            event.target.style.minWidth = '300px';
            event.target.style.height = 'auto';
            flag = true;
        }
    })
}
<img class="painting" src="<%= post.paintingsP %>" />
    <img class="painting" style="max-width: 20%; min-width: 300px; height: 250px;"src="<%= post.paintingsP2 %>" />
1
Ado 8 Maret 2020, 13:05