. 叙述以下jQuery代码主要实现了我们实训案例网站细节页(detail.html)中右侧产品颜色切换的哪些效果,以下的代码起到了哪些作用。(20分) $(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/",""); $(".imgList li").hide(); $("#jnProitem .imgList").find(".imgList_"+newImgSrc).show().eq(0).find("a").click(); }); });
时间: 2024-04-21 10:22:25 浏览: 131
这段 jQuery 代码主要实现了以下效果:
1. 当用户点击颜色选择器中的某个颜色图片时,被点击的图片会添加一个名为 "hover" 的类,并且它的父元素的兄弟元素中的图片会移除 "hover" 类。这样实现了被选中颜色的高亮效果。
2. 获取被点击图片的 src 属性,并根据最后一个点的位置(i)将其分割成两部分。这样做是为了获取图片的文件名和文件类型。
3. 根据文件名和文件类型构造出小图和大图的路径。小图路径是在原图路径的基础上加上 "_one_small",大图路径是在原图路径的基础上加上 "_one_big"。
4. 将小图路径设置为 id 为 "bigImg" 的元素的 src 属性,将大图路径设置为 id 为 "thickImg" 的元素的 href 属性。这样实现了产品图片的切换效果。
5. 获取被点击图片的 alt 属性,并将其设置为 class 为 "color_change" 的 strong 元素的文本内容。这样实现了产品颜色名称的显示效果。
6. 根据新的图片文件名构造出对应的 class 名称,并将具有该 class 名称的 li 元素隐藏。然后在 id 为 "jnProitem" 的元素中找到 class 为 "imgList" 的元素,再找到具有相应 class 名称的 li 元素,并将其显示出来。同时,触发该 li 元素下的第一个 a 元素的点击事件。这样实现了产品图片列表的切换效果。
阅读全文