前几天看到有人在一个群里问如何实现商品规格选择并显示价格，多的不少，直接上代码：
一、带图文版本
1.所需要用到的jQuery文件

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>

2.用的CSS代码

@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;-webkit-text-size-adjust:none;}
body{ background:#fff; font-size:12px; color:#555; font-family:Tahoma, Geneva, sans-serif; padding:100px 100px;}
a{ color:#555; text-decoration:none;}
a:hover{ color:#c00; text-decoration:underline;}
img{ border:none;}
li{ list-style:none;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*tab*/
.tab{ line-height:56px; font-size:14px;}
.tab a{ color:#07c;}
.tab a:hover{ color:#c00;}
.tab a.cur{ font-weight:bold;}
/*商品详细页*/
/*iteminfo*/
.iteminfo{}
.iteminfo_tit{ color:#333; font-size:22px; font-family:"微软雅黑",Arial, Helvetica, sans-serif; border-bottom:1px solid #e3e3e3; font-weight:normal; padding-bottom:12px; line-height:32px;}
.iteminfo_parameter{ padding:8px 0; padding-left:70px;}
.iteminfo_parameter_default{ color:#888;}
.iteminfo_parameter dt{ margin-left:-70px; float:left; display:inline; width:60px; white-space:nowrap; text-align:right; color:#888;}
.iteminfo_mktprice{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-decoration:line-through;}
.lh32{ line-height:32px;}
.iteminfo_price{ color:#c00; font-size:14px; font-family:Arial, Helvetica, sans-serif; vertical-align:middle;}
.sys_item_price{ color:#c00; font-size:22px; vertical-align:middle;}
.iteminfo_buying{ background:#f7f7f7; padding:12px 0;}
/*规格*/
.sys_item_spec dl.iteminfo_parameter{ padding-top:5px; padding-bottom:5px;}
.sys_item_spec dl.iteminfo_parameter dt{ line-height:32px;}
/*一下正对图片*/
.sys_spec_img{}
.sys_spec_img li{ float:left; height:54px; position:relative; margin:2px 6px 2px 0;}
.sys_spec_img li a{height:50px; width:50px; padding:1px; border:1px solid #ccc; float:left; background:#fff; display:inline-block; outline:none;}
.sys_spec_img li a img{ width:50px; height:50px; display:block;}
.sys_spec_img li a:hover{ border:2px solid #e4393c; padding:0; text-decoration:none;}
.sys_spec_img li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_img li.selected a{ border:2px solid #e4393c; padding:0;}
.sys_spec_img li.selected i{ display:block;}
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}

3.界面布局

<div class="tab">
<a href="index.html" class="cur">带图片选择</a> 
<a href="index2.html">纯文本选择</a>
</div> 
<div class="iteminfo_buying"> 
<!--规格属性--> 
<div class="sys_item_spec"> 
<dl class="clearfix iteminfo_parameter iteminfo_parameter_default lh32"> 
<dt>
市场价
</dt> 
<dd>
<span class="iteminfo_mktprice">$<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_img"> 
<li data-aid="3"><a href="javascript:;" title="白色"><img src="img/1.png" alt="白色" /></a><i></i></li> 
<li data-aid="4"><a href="javascript:;" title="粉色"><img src="img/2.png" alt="粉色" /></a><i></i></li> 
<li data-aid="8"><a href="javascript:;" title="蓝色"><img src="img/3.png" alt="蓝色" /></a><i></i></li> 
<li data-aid="9"><a href="javascript:;" title="绿色"><img src="img/4.png" alt="绿色" /></a><i></i></li> 
<li data-aid="10"><a href="javascript:;" title="黄色"><img src="img/5.png" alt="黄色" /></a><i></i></li> 
<li data-aid="12"><a href="javascript:;" title="灰色"><img src="img/6.png" alt="灰色" /></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> 
<!--规格属性--> 
</div>

4.核心实现代码：

<script>
//价格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);
}
})
</script>

效果图一：

20190708170118.png

二、无图片（纯文本）版本
1.所需要用到的jQuery文件

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>

2.用的CSS代码

@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;-webkit-text-size-adjust:none;}
body{ background:#fff; font-size:12px; color:#555; font-family:Tahoma, Geneva, sans-serif; padding:100px 100px;}
a{ color:#555; text-decoration:none;}
a:hover{ color:#c00; text-decoration:underline;}
img{ border:none;}
li{ list-style:none;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*tab*/
.tab{ line-height:56px; font-size:14px;}
.tab a{ color:#07c;}
.tab a:hover{ color:#c00;}
.tab a.cur{ font-weight:bold;}
/*商品详细页*/
/*iteminfo*/
.iteminfo{}
.iteminfo_tit{ color:#333; font-size:22px; font-family:"微软雅黑",Arial, Helvetica, sans-serif; border-bottom:1px solid #e3e3e3; font-weight:normal; padding-bottom:12px; line-height:32px;}
.iteminfo_parameter{ padding:8px 0; padding-left:70px;}
.iteminfo_parameter_default{ color:#888;}
.iteminfo_parameter dt{ margin-left:-70px; float:left; display:inline; width:60px; white-space:nowrap; text-align:right; color:#888;}
.iteminfo_mktprice{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-decoration:line-through;}
.lh32{ line-height:32px;}
.iteminfo_price{ color:#c00; font-size:14px; font-family:Arial, Helvetica, sans-serif; vertical-align:middle;}
.sys_item_price{ color:#c00; font-size:22px; vertical-align:middle;}
.iteminfo_buying{ background:#f7f7f7; padding:12px 0;}
/*规格*/
.sys_item_spec dl.iteminfo_parameter{ padding-top:5px; padding-bottom:5px;}
.sys_item_spec dl.iteminfo_parameter dt{ line-height:32px;}
/*一下正对图片*/
.sys_spec_img{}
.sys_spec_img li{ float:left; height:54px; position:relative; margin:2px 6px 2px 0;}
.sys_spec_img li a{height:50px; width:50px; padding:1px; border:1px solid #ccc; float:left; background:#fff; display:inline-block; outline:none;}
.sys_spec_img li a img{ width:50px; height:50px; display:block;}
.sys_spec_img li a:hover{ border:2px solid #e4393c; padding:0; text-decoration:none;}
.sys_spec_img li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_img li.selected a{ border:2px solid #e4393c; padding:0;}
.sys_spec_img li.selected i{ display:block;}
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}

3.界面布局

  <div class="tab">
   <a href="index.html">带图片选择</a> 
   <a href="index2.html" class="cur">纯文本选择</a>
  </div> 
  <div class="iteminfo_buying"> 
   <!--规格属性--> 
   <div class="sys_item_spec"> 
    <dl class="clearfix iteminfo_parameter iteminfo_parameter_default lh32"> 
     <dt>
      市场价
     </dt> 
     <dd>
      <span class="iteminfo_mktprice">$<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> 
   <!--规格属性--> 
  </div>

4.核心实现代码：

<script>
//价格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);
  }
}) 
</script>

效果图二：
20190708170458.png
上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持轩宇网。

滇ICP备16003699号-2
最后修改：2019 年 07 月 08 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏