jQuery项目总结10.7

 

<script type="text/javascript">         //背景颜色         $(function () {             $("#skin li").click(function () {                 $(this).addClass("selected").siblings().removeClass("selected");                 var cssName = $(this).attr("id");                 //alert(cssName)                 $("#cssfile").attr("href", "styles/skin/" + cssName + ".css")             })         });         //评价         $(function () {             //通过修改样式来显示不同的星级             $("ul.rating li a").click(function () {                 var title = $(this).attr("title");                 alert("您给此商品的评分是：" + title);                 var cl = $(this).parent().attr("class");                 $(this).parent().removeClass().addClass("rating " + cl + "star");                 $(this).blur();//去掉超链接的虚线框                 return false;             })         })         //给衣服换颜色         $(function () {             //$(".color_change ul li img").click(function () {             //    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, "jqimg": imgSrc_big });             //    $("#thickImg").attr("href", imgSrc_big);             //    var alt = $(this).attr("alt");             //    $(".color_change strong").text(alt);             //    var url = imgSrc + ".html";             //    $(".pro_detail_left ul li img")             //        .empty()             //        .load(url);             //});

            $(".color_change ul li img").click(function () {                 var alt = $(this).attr("alt");                 $(".color_change strong").text(alt);

                var imgSrc = $(this).attr("src");     //            var strArray = imgSrc.replace(".jpg", "_one_small.jpg");                 //alert(strArray);                 var strArray = imgSrc.split('.jpg');                 var imgSrc_small = strArray[0] + "_one_small" + ".jpg";                 var imgSrc_big = strArray[0] + "_one_big" + ".jpg";                 $("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big });                 $("#thickImg").attr("href", imgSrc_big);                 if (alt == "粉绿") {                     $(".imgList li:eq(2) img").hide();                 } else {                     $(".imgList li:eq(2) img").show();                 }                 $(".imgList li:eq(0) img").attr("src",strArray[0]+"_one.jpg");                 $(".imgList li:eq(1) img").attr("src", strArray[0] + "_two.jpg");                 $(".imgList li:eq(2) img").attr("src", strArray[0] + "_three.jpg");                                              })             //换图             $(".imgList li img").click(function () {                 var imgSrc = $(this).attr("src");                 var strArray = imgSrc.split('.jpg');                 var imgSrc_small = strArray[0] + "_small" + ".jpg";                 var imgSrc_big = strArray[0] + "_big" + ".jpg";                 $("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big });                 $("#thickImg").attr("href", imgSrc_big);             })         });         //尺寸选择         $(function () {             $(".pro_size li span").click(function () {                 $(this).parents("ul").siblings("strong").text($(this).text());             })         })         /*数量和价格联动*/         $(function () {             var $span = $("div.pro_price span");             var price = $span.text();             $("#num_sort").change(function () {                 var num = $(this).val();                 var amount = num * price;                 $span.text(amount);             }).change();         })         //添加购物车         $(function () {             var $product = $(".pro_detail_right");             $("#cart a").click(function () {                 var pro_name = $product.find("h4:first").text();                 var pro_size = $product.find(".pro_size strong").text();                 var pro_color = $(".color_change strong").text();                 var pro_num = $product.find("#num_sort").val();                 var pro_price = $product.find(".pro_price span").text();                 var dialog = " 感谢您的购买。\n您购买的\n" +                     "产品是：" + pro_name + "；\n" +                     "尺寸是：" + pro_size + "；\n" +                     "颜色是：" + pro_color + "；\n" +                     "数量是：" + pro_num + "；\n" +                     "总价是：" + pro_price + "元。";                 if (confirm(dialog)) {                     alert("您已经下单!");                 }                 return false;//避免页面跳转             })         })         //产品详情切换         $(function () {             var $div_li = $("div.tab_menu ul li");             $div_li.click(function () {                 $(this).addClass("selected")            //当前<li>元素高亮                     .siblings().removeClass("selected");  //去掉其他同辈<li>元素的高亮                 var index = $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。                 $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div                     .eq(index).show()   //显示 <li>元素对应的<div>元素                     .siblings().hide(); //隐藏其他几个同辈的<div>元素             }).hover(function () {                 $(this).addClass("hover");             }, function () {                 $(this).removeClass("hover");             })         })         //图片放大镜         $(function () {             $(".jqzoom").jqueryzoom({                 xzoom: 300, //放大图的宽度(默认是 200)                 yzoom: 300, //放大图的高度(默认是 200)                 offset: 10, //离原图的距离(默认是 10)                 position: "right", //放大图的定位(默认是 "right")                 preload: 1             });         });     </script>