首先，先贴这是相册的HTML
<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-gallery ="{ }" 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;height: 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>说明一些：上面代码中，<ul>（id是imgdata）内是前端框架的规范，可以无视。
<volist>是后端用于输出的，也可以无视。{$imgdata.name}也是后端中使用的。
相册图片：
想实现的类型微信的点击相应图片并打钩的效果：
我现在大概的思路是在CSS中写打钩的HTML效果。点击相应图片之后通过js添加Class实现打钩的效果（只能打钩一个）。
因为我CSS知识比较薄弱，现在希望能有更好的实现思路或者是相应CSS与jQuery代码。
其实更多希望能有实现图片打钩的CSS代码。
无论如何，感谢了。
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://codepen.io/zengkan070...
Ceci est une démo simplement écrite. Le principe est le suivant : définissez un élément distinct sur l'image pour représenter la coche. Cliquez pour contrôler son affichage et son masquage.
Écrivez d'abord une classe CSS, telle que
.ok, responsable de la position du hookAjoutez ensuite des événements de clic à toutes les classes
am-gallery-itemAjoutez la classe
.okà l'élément en cliquant dessus.ok，负责钩号的位置然后再给所有的
am-gallery-item类添加点击事件当点击该类的时候给该元素添加
.ok类如果你想知道哪些元素被选中，只需要获取所有拥有
Si vous voulez savoir quels éléments sont sélectionnés, récupérez simplement tous les éléments avec la classe.ok.ok🎜Un calque de sélection est recouvert au dessus de la photo, avec des effets personnalisés et masqué par défaut ;
Que la photo soit sélectionnée ou non, est lié à un tableau booléen
Après avoir cliqué sur la photo, l'objet correspondant au tableau est inversé et lié à la superposition ;
Une petite idée approximative, je ne sais pas si cela peut aider le répondant. Peut-être qu'il existe des composants prêts à l'emploi, donc pas besoin de réinventer la roue.
L'opération de ticking que vous souhaitez peut être réalisée avec uniquement html+css.
La structure peut être utilisée :<label><input checkbox><p>
la case à cocher est masquée et utilisée pour marquer si elle est sélectionnée ;
Le p derrière elle est utilisé comme coche, et :checked et le sélecteur frère '+' sont utilisés pour déterminer s'il faut l'afficher
l'étiquette modifie la case à cocher ; et l'image peut être placée en arrière-plan de l'étiquette, ce qui présente les avantages suivants
Semblable à l'effet lazyload, comme les images derrière le téléavertisseur ne sont demandées qu'après avoir été utilisées
background-size : contenir peut afficher l'image entièrement
<p style="background-image:...;width:..,height:.."><p class="mask"></p></p>
Créez-en un Dans une structure à deux couches, l'image d'arrière-plan p la plus externe est définie sur une image d'arrière-plan différente et un p est placé dans le calque interne avec une hauteur et une largeur de 100 %, qui est utilisé pour les effets de masquage et est masqué par défaut. Lorsque l'utilisateur clique sur le p externe, un effet similaire se produit lorsque l'affichage p de la couche interne est défini via js.