Html：点击图片进行切换(不用Button按钮，密码显示的小眼睛和购物选中状态，可直接复制但要修改自己相对应的文件路径)

本文链接：https://blog.csdn.net/qq_61360915/article/details/125245318

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、步骤介绍
二、使用步骤
- 1.引入js库
- 2.操作代码
总结

前言

Html：点击图片进行切换(不用Button按钮，密码显示的小眼睛和购物选中状态，可直接复制但要修改自己相对应的文件路径)

提示：以下是本篇文章正文内容，下面案例可供参考

一、步骤介绍

ps:这里由于个人习惯把操作代码写在Body上面众所周知—html页面加载顺序是由上至下由左至右
写在上面只要有“文档加载函数”就不影响页面加载顺序
如果不写“文档加载函数” 就会出现上面的操作代码页面加载后认识
下面的图片属性没有加载到页面并不认识造成代码没有问题但无法实现功能操作的情况

    <!-- 步骤介绍：1.引入jQuery包 在script标签中写操作代码 -->
    <!-- 步骤介绍：2.定义两个变量存储布尔(bool) 为了让自己明白到当前的图片状态
        两个图片不能共用一个变量 如果共用 上面的点击事件就会影响到下面的图片状态-->
        
    <!-- 步骤介绍：3.给要点击的图片添加点击事件 然后判断我们定义的变量当前状态是true还是false 
               如果是true 我们就给他更换 图片路径 src属性 更换完之后给变量状态更换为false
                反之如果是false  则同理 图片更换完之后 变量状态也随之更换。-->
                
    <!-- 步骤介绍：4.更换完之后它会跳出循环，再次点击后会再次进入循环事件 判断变量状态 然后给图片更换成自己想要的状态 -->

二、使用步骤

1.引入js库

代码如下（示例）：

 <script src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">!--在这里写操作代码--!</script>

2.操作代码

代码如下（示例）：

 <script type="text/javascript">
            // 文档加载函数
            $(function() {
                // 定义两个变量来存储bool值  
                var flag1 = true;

                var flag2 = true;
                // 选中小眼睛图片的点击事件
                $('#imgeyes').click(function() {
                    if (flag1 == true) {
                        $('#imgeyes').attr('src', 'img/open.png');
                        flag1 = false;
                    }
                    else {
                        $('#imgeyes').attr('src', 'img/close.png');
                        flag1 = true;
                    }
                })
                 // 选中对勾 √ 图片的点击事件
                // 原理同上 
                $('#imgcheck').click(function() {
                    if (flag2 == true) {
                        $('#imgcheck').attr('src', 'img/ico_checkout.png');

                // 变量赋值一定要写在更换完图片属性之后
                        flag2 = false;
                    }
                    else {
                        $('#imgcheck').attr('src', 'img/ico_unchecked.png');
                        flag2 = true;
                    }
                })
                
            })
        </script>

下面展示 Css样式。

 <style>
//这里因为我就使用的标签数量不多所以直接给标签添加样式
            p {
                border-bottom: 1px solid black;
                /* 下划线 */
            }

            div {
                text-align: center;
                /* 居中 */
            }

            img {
                 cursor: pointer;  
                /* 鼠标显示可点击 */
            }
        </style>

下面展示 Body内容部分。

 <body>
		<div>
			<p>
				<img src="img/close.png" alt="" id="imgeyes">
			</p>

			<p>
				<img src="img/ico_unchecked.png" alt="" id="imgcheck">
			</p>

		</div>
	</body>

下面展示 整体内容部分。

此处可直接复制 内容文字可直接删除 
注意修改自已图片文件对应路径和js文件夹下的JQuery功能包是否存在！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- ps:这里由于个人习惯把操作代码写在上面 众所周知---html页面加载顺序是由上至下 由左至右 
			写在上面只要有“文档加载函数”就不影响页面加载顺序 
			如果不写“文档加载函数” 就会出现上面的操作代码页面加载后认识
			下面的图片属性没有加载到页面并不认识 造成代码没有问题但无法实现功能操作的情况 	 -->
			
		<!-- 步骤介绍：1.引入jQuery包 在script标签中写操作代码 -->
		<!-- 步骤介绍：2.定义两个变量存储布尔(bool) 为了让自己明白到当前的图片状态
			两个图片不能共用一个变量 如果共用 上面的点击事件就会影响到下面的图片状态-->
			
		<!-- 步骤介绍：3.给要点击的图片添加点击事件 然后判断我们定义的变量当前状态是true还是false 
					如果是true 我们就给他更换 图片路径 src属性 更换完之后给变量状态更换为false
					反之如果是false  则同理 图片更换完之后 变量状态也随之更换。-->
					
		<!-- 步骤介绍：4.更换完之后它会跳出循环，再次点击后会再次进入循环事件 判断变量状态 然后给图片更换成自己想要的状态 -->
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 文档加载函数
			$(function() {
				// 定义两个变量来存储bool值  
				var flag1 = true;

				var flag2 = true;
				// 选中小眼睛图片的点击事件
				$('#imgeyes').click(function() {
					if (flag1 == true) {
						$('#imgeyes').attr('src', 'img/open.png');
						// 变量赋值一定要写在更换完图片属性之后
						flag1 = false;
					}
					else {
						$('#imgeyes').attr('src', 'img/close.png');
						flag1 = true;
					}
				})
				
				// 选中对勾 √ 图片的点击事件
				// 原理同上 
				$('#imgcheck').click(function() {
					if (flag2 == true) {
						$('#imgcheck').attr('src', 'img/ico_checkout.png');
						flag2 = false;
					}
					else {
						$('#imgcheck').attr('src', 'img/ico_unchecked.png');
						flag2 = true;
					}
				})
				
			})
		</script>
		<style>
			p {
				border-bottom: 1px solid black;
				/* 下划线 */
			}

			div {
				text-align: center;
				/* 居中 */
			}

			img {
				cursor: pointer; 
				/* 鼠标显示可点击 */
			}
		</style>
	</head>
	<body>

		<div>

			<p>
				<img src="img/close.png" alt="" id="imgeyes">
			</p>

			<p>
				<img src="img/ico_unchecked.png" alt="" id="imgcheck">
			</p>

		</div>
	</body>
</html>