【jQuery】修改图片src属性切换图片

最新推荐文章于 2024-07-05 23:24:20 发布

Gary强z

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量7.8w

点赞数 3

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/blue225/article/details/51337109

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【实现目标】

实现对如下（图1）与（图2）之间的切换：

图1：

图2：

【实现方案】

方案一：

先看下，采用传统javascript是怎样修改图片的：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="No-Cache">
	</head>
	<body>
		<div class="grid">
			<img height="100%" id="sort_grid_pic" alt="" src="img/f5/sort_grid1.jpg" οnclick="switchToGrid()"/>
		</div>
		<div class="list">
			<img height="100%" id="sort_list_pic" alt="" src="img/f5/sort_list2.jpg" οnclick="switchToList()"/>
		</div>
	</body>
</html>
<script type="text/javascript">
	function switchToGrid(){
		document.getElementById('pic').src="img/f5/content_grid.jpg";
		document.getElementById('sort_grid_pic').src="img/f5/sort_grid1.jpg";
		document.getElementById('sort_list_pic').src="img/f5/sort_list2.jpg";
	}
	
	function switchToList(){
		document.getElementById('pic').src="img/f5/content_list.jpg";
		document.getElementById('sort_grid_pic').src="img/f5/sort_grid2.jpg";
		document.getElementById('sort_list_pic').src="img/f5/sort_list1.jpg";
	}
</script>

方案2：

对比下采用jQuery修改图片时的写法：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="No-Cache">
		<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#sort_grid_pic').on({
					click:function(){
						$('#pic').attr('src', 'img/f5/content_grid.jpg');
						$('#sort_grid_pic').attr('src', 'img/f5/sort_grid1.jpg');
						$('#sort_list_pic').attr('src', 'img/f5/sort_list2.jpg');
					}
				});
				
				$('#sort_list_pic').on({
					click:function(){
						$('#pic').attr('src', 'img/f5/content_list.jpg');
						$('#sort_grid_pic').attr('src', 'img/f5/sort_grid2.jpg');
						$('#sort_list_pic').attr('src', 'img/f5/sort_list1.jpg');
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="grid">
			<img id="sort_grid_pic" alt="" src="img/f5/sort_grid1.jpg" />
		</div>
		<div class="list">
			<img id="sort_list_pic" alt="" src="img/f5/sort_list2.jpg" />
		</div>
	</body>
</html>

其实这里主要是为了了解jQuery绑定事件的写法，还有就是获取和设置属性的写法：

1) 绑定onclick事件：

$('#sort_grid_pic').on({
	click:function(){
		// do something
	}
});

或

$('#sort_grid_pic').click(function(){
		// do something
	}
);

2) 获取属性与设置属性：

// get attribute value
var picSrc = $('#pic').attr('src');
// set attribute value
$('#pic').attr('src', 'img/f5/content_list.jpg');

方案三：

其实jquery还有个更简洁的方案实现图片的切换，那就是使用toggle()方法。

【总结】

两种写法个人感觉是更倾向于jQuery的写法，

1) 从代码上给人感觉要更优雅简洁大方；

2) 不需要考虑定义那么多的方法名，写代码时考虑怎么取名对我是件痛苦的事情。

【疑惑】

其实当时在写这个切换图片的时候遇到有下面的这个疑惑的问题，后来只得暂时以传统方法去设置图片属性值了。

1) 原因是这样的，因为我知道修改CSS属性的时候，可以在JS脚本里面这样写：

$(".sort").css('visibility', 'visible');

2) 然后就想当然的以为，可以用同样的方式修改图片img元素的src属性值

/*$("#pic").css('src', 'img/f5/project.jpg');*/

当然现在我知道这个写法问题的了。

我的理解是：src是属于html元素的属性而非css样式属性，所以不能这么写（不知道这个理解是否OK？有待查证）。

Gary强z

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
4
评论
【jQuery】修改图片src属性切换图片

先看下，采用传统javascript是怎样修改图片的： function switchToGrid(){ document.getElementById('pic').src="img/f5/content_grid.jpg"; document.getElementById('sort_grid_pic
复制链接

扫一扫