js点击图片更换图片

Question

(function($){
    $(document).ready(function(){
        $('#img1').click(function(){
            $(this).attr('src',$(this).attr('src')=='a.jpg'?'a1.jpg':'a.jpg');
        });
    })
})(jQuery); 
(function($){
    $(document).ready(function(){
        $('#img2').click(function(){
            $(this).attr('src',$(this).attr('src')=='b.jpg'?'b1.jpg':b.jpg');
        });
    })
})(jQuery);

因为图片有很多，当我点击第一个图片的时候更换图片，我在点另一个图片也更换，但是前一个更换后的图片得变回原来的图片 ，这个怎么写才好呢

Answer 1

只有两张图片用你这个思路也没什么，如果有很多图片，你封装一下方法就好了。例如function imgChange（img1，img2），前提是只用两张图片切换。多图片切换和轮播图我觉得没什么区别，改一改就好了。

Answer 2

遍历相同的元素绑定事件。点击当前元素，改变当前元素的路径，相邻元素重置路径。

Answer 3

<img src='' data-src="不变的那个图片">
每次点击，自己的切换到别的图片，其他图片换回data-src

Answer 4

可以定义一个数组对象，键为选择器，值为图片的src数组。
这样，根据点击的元素，选择相应的src，如果只有两张图片的切换，那当然比较简单

$(this).attr('src', obj.selector[isFirst? 0:1]);

Answer 5

把图片地址放到一个数组里面，点击是时候取下一个，取到末尾换回第一个。

Answer 6

多用css类（class）。
给点击的块加一个active状态，其他的去掉active状态。