您的位置：首页 > Web前端 > JQuery

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

2016-05-07 11:54 555 查看
【实现目标】

实现对如下（图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" onclick="switchToGrid()"/>
</div>
<div class="list">
<img height="100%" id="sort_list_pic" alt="" src="img/f5/sort_list2.jpg" onclick="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？有待查证）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航