javascript - 如何实现，网页中单击图片后，图片被选中而且显示打钩

问题描述

问 题

首先，先贴这是相册的HTML

<div 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>
<div 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>
<div class="am-gallery-desc">{$imgdata.time|date='Y-m-d H:i:s',###}
</div>
</a>
</div>
</li>
</volist>
</ul>

说明一些：上面代码中，<ul>（id是imgdata）内是前端框架的规范，可以无视。
<volist>是后端用于输出的，也可以无视。{$imgdata.name}也是后端中使用的。

相册图片：

想实现的类型微信的点击相应图片并打钩的效果：

我现在大概的思路是在CSS中写打钩的HTML效果。点击相应图片之后通过js添加Class实现打钩的效果（只能打钩一个）。
因为我CSS知识比较薄弱，现在希望能有更好的实现思路或者是相应CSS与jQuery代码。

其实更多希望能有实现图片打钩的CSS代码。

无论如何，感谢了。

解决方案

https://codepen.io/zengkan070...
这是简单写的一个 demo。原理就是：在图片上面设置一个单独的元素，用来表示对号。通过点击来控制它的显示隐藏。

这篇关于javascript - 如何实现，网页中单击图片后，图片被选中而且显示打钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！