点击/取消选中变换图片和input赋值

最新推荐文章于 2020-12-20 10:29:35 发布

打瞌睡的喵熊

最新推荐文章于 2020-12-20 10:29:35 发布

阅读量288

点赞数

分类专栏： jq 文章标签： jq 切换图片选中状态切换

本文链接：https://blog.csdn.net/qq_33708877/article/details/88637174

版权

该博客介绍了如何使用jQuery实现图片的选中和取消选中状态的变换，同时更新对应的input字段值。在不选中状态下，图片ID为数字，路径包含该数字。点击图片后，如果ID是数字，则ID更改为'1-1'，图片路径相应改变，input的值通过Math.abs计算进行切换。取消选中时，状态反向操作。

摘要由CSDN通过智能技术生成

点击/取消选中变换图片和input赋值

jq部分
HTML部分
具体效果
解释

jq部分

	$(document).ready(function() {
   
        $(".record_img").click(function () {
   
            if (!isNaN(this.id)) {
   
                $(this).attr('id',$(this).attr('data-id')+'-'+$(this).attr('data-id'));
                $(this).attr('src','__RECORD__'+$(this).attr('data-id')+'-'+$(this).attr('data-id')+'.png');
                $(this)