在我们网购页面中会有以下的情况:
1.购物车在选购数量总价格会自动实现加减法运算!
买1个!! 买三个!!! 通俗的可以理解为一个简单的乘法计算器
HTML代码:
<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>jQuery代码:
//数量价格改变 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();2.五星好评! HTML代码:
给商品评分: <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>jQuery代码:
//产品评分效果 //评分效果的图片点击 $(".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"); });会以弹窗的方式显示评星!!