【实现目标】
实现对如下（图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？有待查证）。
