jquery服装商城的尺寸选择与数量改变之后的价格改变

服装商城的信息图片

jquery服装商城的尺寸选择与数量改变之后的价格改变_第1张图片

图片

未选择之前 :                                                                选择之后:

   jquery服装商城的尺寸选择与数量改变之后的价格改变_第2张图片                                                jquery服装商城的尺寸选择与数量改变之后的价格改变_第3张图片

HTML代码部分

尺寸:未选择
  • S
  • L
  • SL
  • LL
数量:
总计:200
给商品评分:

js代码部分

$(funtion(){
//尺寸点击事件
            $(".pro_size li span").click(function () {
                $(this).parents("ul").siblings("strong").text($(this).text());
            });
            //数量价格改变
            var $span = $(".pro_price span");
            var div_price = $span.text();
            $("#num_sort").change(function () {
                var num = $(this).val();
                var amount = num * div_price;
                $span.text(amount);
            }).change();

            //产品评分效果
            //评分效果的图片点击
            $(".rating li a").click(function () {
                //当前事件超链接的title
                var title = $(this).attr("title");
                //跳出评分
                alert("你给出的评分是" + title);
                //parent():在给定的父元素下匹配所有的子元素
                //获取一个class下的所有子元素属性
                var cl = $(this).parent().attr("class");
                //获取图片的点击后的效果
                $(this).parent().parent().removeClass().addClass("rating  " + cl + "star");
            });
});

你可能感兴趣的:(JQuery)