javascript - Bagaimana untuk melaksanakan, selepas mengklik pada gambar di halaman web, gambar dipilih dan tanda semak dipaparkan

Question

Mula-mula, tampal HTML album foto

<p class="main-body">
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered" data-am-galery ="{ }" id="uldata">
<volist name="imgdata" id="imgdata">
<li>
<p class="am-gallery-item" id="{$imgdata.id}">
<a href="{$url}{$imgdata.image}">
<img class="imgyes" src="{$url}{$imgdata.image}" alt="{$imgdata.note}" id="imgid{$imgdata.id}" style="width: 245px; ketinggian: 147px"/>
<h3 class="am-gallery-title">{$imgdata.name}</h3>
<p class="am-gallery-desc">{$imgdata.time|date='Y-m-d H:i:s',###}
</p>
</a>
</p>
</li>
</volist>
</ul>

Beberapa penjelasan: Dalam kod di atas, <ul> (id ialah imgdata) ialah spesifikasi rangka kerja bahagian hadapan dan boleh diabaikan.
<volist> digunakan untuk output oleh bahagian belakang dan juga boleh diabaikan. {$imgdata.name} juga digunakan di bahagian belakang.

Gambar album:

Jenis kesan WeChat yang anda ingin capai dengan mengklik pada gambar yang sepadan dan menyemak:

Idea umum semasa saya ialah untuk menulis kesan HTML semakan dalam CSS. Selepas mengklik pada gambar yang sepadan, tambahkan Kelas melalui js untuk mencapai kesan semak (hanya satu boleh disemak).
Oleh kerana pengetahuan CSS saya agak lemah, saya kini berharap untuk mempunyai idea pelaksanaan yang lebih baik atau kod CSS dan jQuery yang sepadan.

Malah, saya berharap akan ada lebih banyak kod CSS untuk melaksanakan pengait imej.

Apa pun, terima kasih.

Answer 1

https://codepen.io/zengkan070...
Ini ialah demo bertulis ringkas. Prinsipnya ialah: tetapkan elemen berasingan pada gambar untuk mewakili tanda semak. Klik untuk mengawal paparan dan persembunyiannya.

Answer 2

Mula-mula tulis kelas css, seperti .ok, bertanggungjawab untuk kedudukan cangkuk
Kemudian tambahkan acara klik pada semua kelas am-gallery-item
Tambahkan kelas .ok pada elemen apabila mengklik padanya.ok，负责钩号的位置
然后再给所有的 am-gallery-item 类添加点击事件
当点击该类的时候给该元素添加 .ok 类

如果你想知道哪些元素被选中，只需要获取所有拥有.ok

Jika anda ingin tahu elemen mana yang dipilih, dapatkan semua elemen dengan kelas .ok🎜

Answer 3

Lapisan pilihan diliputi di atas foto, dengan kesan tersuai dan disembunyikan secara lalai
Sama ada foto dipilih atau tidak, terikat pada tatasusunan Boolean
Selepas foto diklik, objek yang sepadan dengan tatasusunan terbalik dan terikat dengan tindanan ;
Sedikit idea kasar, saya tidak tahu sama ada ia boleh membantu responden Mungkin ada komponen siap, jadi tidak perlu mencipta semula roda.

Answer 4

Operasi ticking yang anda inginkan boleh dicapai dengan hanya html+css.

Struktur boleh digunakan:<label><kotak semak input><p>

kotak semak disembunyikan dan digunakan untuk menandakan sama ada ia dipilih
P di belakangnya digunakan sebagai tanda semak, dan :ditandakan dan pemilih adik beradik '+' digunakan untuk menentukan sama ada untuk memaparkannya
label mengubah suai kotak semak, dan gambar boleh diletakkan di latar belakang label, yang mempunyai manfaat berikut

1. Serupa dengan kesan lazyload, seperti imej di belakang alat kelui diminta hanya selepas digunakan

2. saiz latar belakang: mengandungi boleh membuat imej dipaparkan sepenuhnya

Answer 5

<p style="background-image:...;width:..,height:.."><p class="mask"></p></p>
Buat satu Dalam struktur dua lapisan, imej latar belakang p paling luar ditetapkan kepada imej latar belakang yang berbeza, dan p diletakkan di lapisan dalam dengan ketinggian dan lebar 100%, yang digunakan untuk menutup kesan dan disembunyikan secara lalai. Apabila p luar diklik, kesan yang sama berlaku apabila paparan p lapisan dalam ditetapkan melalui js.