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>