JQuery代码:
$(function () {
///显示所选择的尺寸
$(".pro_size span").click(function () {
var $this = $(this).text();获取鼠标单的span的text文本
$(".pro_size strong").text($this);///更换尺寸后的显示文本
})
///显示数量
$(".pro_num").click(function () {///给下拉框机单击事件
var num = $("#num_sort :selected").val();///获取下拉框的选择数字;
$(".pro_price span").text(200 * num);///总计为200*所获气的下拉框数字
})
星级评价
$(".pro_rating a").click(function () {///给星星加单击事件
var $this = $(this);///获取所点击的a
var title = $this.attr("title");//获取所点击的a的title
alert("您给本件商品的评分为:" + title);///弹框
var cl = $this.parent().attr("class");///选择ul的class
$this.parent().parent().attr("class","rating " + cl + "star");///星星变为绿色
})
})
<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>
效果图: