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

阅读: 评论:0

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

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

服装商城的信息图片


图片

未选择之前 :                                                                选择之后:

                                                 

HTML代码部分

<div class="pro_size">尺寸:<strong>未选择</strong><ul><li><span>S</span></li><li><span>L</span></li><li><span>SL</span></li><li><span>LL</span></li></ul></div><div class="pro_num">数量:<select id="num_sort" style="width:40px;"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><div class="pro_price">总计:<span>200</span>元</div><div class="pro_rating">给商品评分:<ul class="rating nostar"><li class="one"><a href="#" title="1分">1</a></li><li class="two"><a href="#" title="2分">2</a></li><li class="three"><a href="#" title="3分">3</a></li><li class="four"><a href="#" title="4分">4</a></li><li class="five"><a href="#" title="5分">5</a></li></ul></div>

js代码部分

$(funtion(){
//尺寸点击事件$(".pro_size li span").click(function () {$(this).parents("ul").siblings("strong").text($(this).text());});//数量价格改变var $span = $(".pro_price span");var div_price = $();$("#num_sort").change(function () {var num = $(this).val();var amount = num * div_price;$(amount);}).change();//产品评分效果//评分效果的图片点击$(".rating li a").click(function () {//当前事件超链接的titlevar title = $(this).attr("title");//跳出评分alert("你给出的评分是" + title);//parent():在给定的父元素下匹配所有的子元素//获取一个class下的所有子元素属性var cl = $(this).parent().attr("class");//获取图片的点击后的效果$(this).parent().parent().removeClass().addClass("rating  " + cl + "star");});
});

本文发布于:2024-02-01 04:59:27,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170673476734046.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:尺寸   数量   商城   服装   价格
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23