产品颜色切换

本节来设计右侧产品颜色切换，与单击左侧产品小图片切换为大图片类似，不过还需要多做几步，即显示当前所选中的颜色和显示相应产品列表，演示效果如图1所示。

图1 产品颜色切换效果

【操作步骤】

第1步，新建JavaScript文档，保存为switchColor.js，然后输入下面代码：

/*衣服颜色切换*/
$(function(){
	$(".color_change ul li img").click(function(){    
		  $(this).addClass("hover").parent().siblings().find("img").removeClass("hover");
		  var imgSrc = $(this).attr("src");
		  var i = imgSrc.lastIndexOf(".");
		  var unit = imgSrc.substring(i);
		  imgSrc = imgSrc.substring(0,i);
		  var imgSrc_small = imgSrc + "_one_small"+ unit;
		  var imgSrc_big = imgSrc + "_one_big"+ unit;
		  $("#bigImg").attr({"src": imgSrc_small });
		  $("#thickImg").attr("href", imgSrc_big);
		  var alt = $(this).attr("alt");
		  $(".color_change strong").text(alt);
		  var newImgSrc = imgSrc.replace("images/pro_img/","");
		  $("#jnProitem .imgList li").hide();
		  $("#jnProitem .imgList").find(".imgList_"+newImgSrc).show();
	});
});

第2步，运行效果后，产品颜色可以正常切换了，演示效果如上图所示。

第3步，但点击会发现一个问题，如果不手动去单击缩略图，那么放大镜效果显示的图片还是原来的图片，解决方法很简单，只要触发获取的元素的单击事件即可。在上面代码尾部添加如下一行代码：

//解决问题：切换颜色后，放大图片还是显示原来的图片。
$("#jnProitem .imgList").find(".imgList_"+newImgSrc).eq(0).find("a").click();