Jquery 点击切换图片并隐藏与显示内容的实现代码

开始今天的jquery 教程吧，介绍如何操作图片切换与内容的显示与隐藏。

方法1，

//常规方法
$(function(){
var images = ['images/up.png', 'images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$(img).attr("src",images[1]);
$(img).removeClass();
}else{
$(img).attr("src",images[0]);
$(img).addClass("up");
}
});
})
<img src="images/up.png" class="up">
$(function(){
var images = ['images/up.png', 'images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$(img).attr("src",images[1]);
$(img).removeClass();
}else{
$(img).attr("src",images[0]);
$(img).addClass("up");
}
});
})
<img src="images/up.png" class="up">

主要是给图片控件注册一个点击事件，点击的时候添加CSS控制(css主要设置是否显示某部分内容)，同时更换图片。

方法2：

//使用arguments.callee.em ^= 1自动选择数组参数
functionchangeimg() {
//换图片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隐藏下方的div
var content =$(".hidecontent");
//根据display属性判断该进行的操作
//by http://www.jb200.com
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//换图片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隐藏下方的div
var content =$(".hidecontent");
//根据display属性判断该进行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}

这里将图片地址放到了一个数组中，异或运算，自动选择数组参数，实现图片的切换。
内容的隐藏显示，则使用了.css属性。

两种方法，各有千秋，大家自行测试，看看哪个方法更适合自己。