jquery点击toggle并改变图片src源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击toggle并改变图标src</title>
</head>
<script src="images/jquery-1.8.3.min.js"></script> 
<script>
//函数实现
//参数para1：希望隐藏元素的id
//参数para2：希望改变图片src的img的id
/*
function toggle1(para1,para2){
	if($("#"+para2).attr("src")=="images/col_24.jpg")
	{
		$("#"+para2).attr("src","images/col_11.jpg");
	}
	else
	{
		$("#"+para2).attr("src","images/col_24.jpg");
	}
	$("#"+para1).toggle();
}
*/
//jquery闭包实现
(function($){
	$(document).ready(function(){
		$("#div1").click(function(){
			if($("#img1").attr("src")=="images/col_24.jpg")
			{
				$("#img1").attr("src","images/col_11.jpg");
			}
			else
			{
				$("#img1").attr("src","images/col_24.jpg");
			}
			$("#p1").toggle();	
		});
		$("#div2").click(function(){
			if($("#img2").attr("src")=="images/col_24.jpg")
			{
				$("#img2").attr("src","images/col_11.jpg");
			}
			else
			{
				$("#img2").attr("src","images/col_24.jpg");
			}
			$("#p2").toggle();	
		});
	});
})(jQuery);
</script>
<body>
<!-- 函数实现html代码部分 -->
<!--
<div id="div1" οnclick="toggle1('p1','img1')" style="width:350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>
<p id="p1">要隐藏的p1</p>
<div id="div2" οnclick="toggle1('p2','img2')" style="width:350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px"  />点击此处，隐藏下面的p2并改变图标src</div>
<p id="p2">要隐藏的p2</p>
-->
<!-- 闭包实现html代码部分 -->
<div id="div1" style="width:350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>
<p id="p1">要隐藏的p1</p>
<div id="div2" style="width:350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px"  />点击此处，隐藏下面的p2并改变图标src</div>
<p id="p2">要隐藏的p2</p>
</body>
</html>
源码下载：http://download.csdn.net/detail/cag/9345695
来源：CSDN
作者：山水一程2050
链接：https://blog.csdn.net/cag/article/details/50257301
标签
jquery
toggle