Question

跪求jquery如何点击一个图片变成另一个图片

如何用JS实现 原来是这个图片（01.png）点击之后变成（02.png）
点击另一个（03.png）之后变成(04.PNG)
请教大神们如何实现。。。本人JS小白 请各位帮忙简单写一下





Answer 1

<img src="01.png" onclick="changeImg()" id="img"/>

function changeImg(){

$("img").attr("src","02.png");
}

追问

太感谢您了，实现了，但是请问 怎么单机03.png的时候显示04.png（按您写的） 而之前显示的02.png重新变成原来的01.png

追答

可以写一个function先初始化所有的图片，在把要改的这个图片改了，
//每张图片的imgid要是不一样的
图片的命名要有规律。
比如暗色的为00.png、01.png、02.png
亮色的为10.png、11.png、12.png
图片id img00 img01 img02

function changeImg(imgid){
//初始化所有的图片

$("img").each(function(i,n){
$(this).attr("src",“0”+i+".png");
if($(this).attr("id")==imgid){
$(this).attr("src",“1”+i+".png");//修改点击的那张图
}
});
}

Answer 2

把需要变换的图片放进一个数组内，加减数组的索引实现

Answer 3

body里面：
<IMG id="png_1" src="/01.png" />

引入JQuery，JS里面写
$(function(){

$("#png_1").click(function(){
$(this).attr("src","/02.png");
})；
});

追问

太谢谢了，实现了，我想做一排这样的按钮，请问如何点击（03.png）之后变成（04.png）而（02.png）重新变成（01.png）呢，请您指点一下下

追答

$(function(){
$("img").click(function(){
init_png;
});
$("#png_1").click(function(){
$(this).attr("src","/02.png");
});
$("#png_2").click(function(){
$(this).attr("src","/04.png");
});
$("#png_3").click(function(){
$(this).attr("src","/06.png");
});
});

init_png=function(){
//初始化
$("#png_1").attr("src","/01.png");
$("#png_2").attr("src","/03.png");
$("#png_3").attr("src","/05.png");
}

Answer 4

$("#id").click(function(){$("#imgid").attr("src","")})