素材牛VIP会员

jQuery非常实用的商品分类选择效果

 所属分类:网页特效-输入/选择框/联动

 浏览:2294次  评论:0次  更新时间:2016-09-24
牛币素材VIP可免积分下载
jQuery非常实用的商品分类选择效果兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:这个插件实现网站购物不同款式、属性的选择,支持多种选择方式。

详细介绍

使用方法:

引入jQuery、CSS样式

<link type="text/css" href="base.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>

HTML结构

<!--规格属性-->
<div class="sys_item_spec">
    <dl class="clearfix iteminfo_parameter iteminfo_parameter_default lh32">
        <dt>市场价</dt>
        <dd><span class="iteminfo_mktprice">{#content}lt;b class="sys_item_mktprice">13.00</b></span></dd>
    </dl>
    <dl class="clearfix iteminfo_parameter lh32">
        <dt>本网价</dt>
        <dd><span class="iteminfo_price">$ <b class="sys_item_price">6.80</b></span></dd>
    </dl>
    <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
        <dt>颜色</dt>
        <dd>
            <ul class="sys_spec_text">
                <li data-aid="3"><a href="javascript:;" title="白色">白色</a><i></i></li>
                <li data-aid="4"><a href="javascript:;" title="粉色">粉色</a><i></i></li>
                <li data-aid="8"><a href="javascript:;" title="蓝色">蓝色</a><i></i></li>
                <li data-aid="9"><a href="javascript:;" title="绿色">绿色</a><i></i></li>
                <li data-aid="10"><a href="javascript:;" title="黄色">黄色</a><i></i></li>
                <li data-aid="12"><a href="javascript:;" title="灰色">灰色</a><i></i></li>
            </ul>
        </dd>
    </dl>
    <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="2">
        <dt>尺码</dt>
        <dd>
            <ul class="sys_spec_text">
                <li data-aid="13"><a href="javascript:;" title="S">S</a><i></i></li>
                <li data-aid="14"><a href="javascript:;" title="M">M</a><i></i></li>
                <li data-aid="16"><a href="javascript:;" title="L">L</a><i></i></li>
                <li data-aid="17"><a href="javascript:;" title="XL">XL</a><i></i></li>
            </ul>
        </dd>
    </dl>
</div>
<!--规格属性-->

JS初始化、参数配置

//价格json
var sys_item={
	"mktprice":"13.00",
	"price":"6.80",
	"sys_attrprice":{"3_13":{"price":"6.80","mktprice":"13.00"},"3_14":{"price":"7.80","mktprice":"14.00"},"3_16":{"price":"8.80","mktprice":"15.00"},"3_17":{"price":"9.80","mktprice":"16.00"},"4_13":{"price":"6.80","mktprice":"13.00"},"4_14":{"price":"7.80","mktprice":"14.00"},"4_16":{"price":"8.80","mktprice":"15.00"},"4_17":{"price":"9.80","mktprice":"16.00"},"8_13":{"price":"6.80","mktprice":"13.00"},"8_14":{"price":"7.80","mktprice":"1400"},"8_16":{"price":"8.80","mktprice":"15.00"},"8_17":{"price":"9.80","mktprice":"16.00"},"9_13":{"price":"6.80","mktprice":"13.00"},"9_14":{"price":"7.80","mktprice":"14.00"},"9_16":{"price":"8.80","mktprice":"15.00"},"9_17":{"price":"9.80","mktprice":"16.00"},"10_13":{"price":"6.80","mktprice":"13.00"},"10_14":{"price":"7.80","mktprice":"14.00"},"10_16":{"price":"8.80","mktprice":"15.00"},"10_17":{"price":"9.80","mktprice":"16.00"},"12_13":{"price":"6.80","mktprice":"13.00"},"12_14":{"price":"7.80","mktprice":"14.00"},"12_16":{"price":"8.80","mktprice":"15.00"},"12_17":{"price":"9.80","mktprice":"16.00"}}};
//商品规格选择
$(function(){
	$(".sys_item_spec .sys_item_specpara").each(function(){
		var i=$(this);
		var p=i.find("ul>li");
		p.click(function(){
			if(!!$(this).hasClass("selected")){
				$(this).removeClass("selected");
				i.removeAttr("data-attrval");
			}else{
				$(this).addClass("selected").siblings("li").removeClass("selected");
				i.attr("data-attrval",$(this).attr("data-aid"))
			}
			getattrprice() //输出价格
		})
	})
	
	//获取对应属性的价格
	function getattrprice(){
		var defaultstats=true;
		var _val='';
		var _resp={
			mktprice:".sys_item_mktprice",
			price:".sys_item_price"
		}  //输出对应的class
		$(".sys_item_spec .sys_item_specpara").each(function(){
			var i=$(this);
			var v=i.attr("data-attrval");
			if(!v){
				defaultstats=false;
			}else{
				_val+=_val!=""?"_":"";
				_val+=v;
			}
		})
		if(!!defaultstats){
			_mktprice=sys_item['sys_attrprice'][_val]['mktprice'];
			_price=sys_item['sys_attrprice'][_val]['price'];
		}else{
			_mktprice=sys_item['mktprice'];
			_price=sys_item['price'];
		}
		//输出价格
		$(_resp.mktprice).text(_mktprice);  ///其中的math.round为截取小数点位数
		$(_resp.price).text(_price);
	}
})

相关素材 - 输入/选择框/联动

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)