js 规格多选，选中显示和还可以选择的数量多维度选择

最新推荐文章于 2025-04-18 07:58:08 发布

iteye_2837

最新推荐文章于 2025-04-18 07:58:08 发布

阅读量1.3k

点赞数

分类专栏：前端前端，js，jquery 文章标签：多选 array方法扩展

本文链接：https://blog.youkuaiyun.com/iteye_2837/article/details/82680299

版权

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

前端，js，jquery

5 篇文章

订阅专栏

<body>
<section class="seletSide js_seletSide VBox" style="display: none;">
<section class="goodsSmallImg HBox BoxCenter">
<figure class="goodsImg ">
<img src="static_v3/image/goods1.jpg" alt="" />
</figure>
<div class="Bflex1">
<p class="priceAreaBox">
<i>￥</i><span class="goodsPrice js_goodsPrice" pprice="29.00">29.00</span>
</p>
<p class="">库存：<span>2510</span>份</p>
<p class="user_seleted js_user_seleted" >已选择：<span>8只全母2.1 - 2.4两 , M</span></p>
</div>
</section>

<section class="goodsSizeList goodsList js_goodsList VBox Bflex1 "style="display: none1;">
<section class="goodsSize js_goodsSize VBox Bflex1 js_many" >
<div class="js_goodsSizemob" id="0">
<p class="sideTitle">颜色:</p>
<ul class="Bflex1 clearfix">
<li class="active">8只全母 2.1 - 2.4两</li>
<li>10只全母 2.2 - 2.6两</li>
<li>4对公3.0 - 3.4两母2.0 - 2.4两</li>
<li>4对公3.0 - 3.4两母2.0 - 2.4两</li>
<li>8只全母 2.1 - 2.4两</li>
</ul>
</div>
<div class="js_goodsSizemob"id="1">
<p class="sideTitle">尺码:</p>
<ul class="Bflex1 clearfix">
<li class="">X</li>
<li>M</li>
<li>X</li>
<li>XL</li>
<li>XXL</li>
</ul>
</div>
</section>

<section class="buyGoodsNum HBox BoxCenter ">
<p class="sideTitle Bflex1">购买数量</p>
<div class="amountBox HBox js_amountBox BoxCenter ">
<button class="numBtn js_handBtn active" type="button">-</button>
<input class="sumNum js_sumNum" type="number" name="" id="" value="1" />
<button class="numBtn js_handBtn" type="button">+</button>
</div>
</section>
</section>

<section class="goBuy">
<button type="button" class="btnStyle btn_Bghui js_addCarONBtn" style="display: none;">还可以选择 <i>6</i> 件</button>
<button type="button" class="btnStyle btn_Bgred js_addCarOKBtn" style="display:none1">确定</button>
</section>

<div class="icon-cross js_closeSideBtn"></div>
</section>

</body>

var list = new Array();
ogoodsSizeListTow.hammer().on('tap',function(e) {
//console.log(e);
var i;
myPub.OffMuiEvent(false);
var _tarTag = e.gesture.target;
var target;
if(_tarTag.nodeName.toLowerCase() == 'li') {
target = $(_tarTag);
var flowers = ogoodsSizeListTow.hasClass("Flowers");
if(flowers === true){
if(target.hasClass('active')){
target.removeClass('active');
i = list.length-1
oAddCarONBtn.text('还可以选择'+i+'件');
oAddCarONBtn.css('display','block')
oAddCarOKBtn.css('display','none');
$.each(list,function(i){
if(!list[i].hasClass('active')){
list.arrayRemove(i);
}
});
}
list.push(target);
target.addClass('active');
if(list.length > 3){
list.shift().removeClass('active');
}
i = 3 - list.length;
console.log(i)
oAddCarONBtn.text('还可以选择'+i+'件');
if(i == 0){
oAddCarONBtn.css('display','none')
oAddCarOKBtn.css('display','block');
}
return;
}
}
});

Array.prototype.arrayRemove = function(dx){
if(isNaN(dx)||dx>this.length){return false;}
this.splice(dx,1);
}

//多维度选择
oGoodsList.hammer().on('tap',function(e) {
//console.log(e)
myPub.OffMuiEvent(false);
var _tarTag = e.gesture.target;//获取点击的li
var target;
if(_tarTag.nodeName.toLowerCase() == 'li') {
target = $(_tarTag);
if(target.attr('mobilepar')==0){
console.log(target.attr('mobilepar'));
return false;
}
target.parents('.goodsSizeList').find('li').removeClass('active');//获取当前点击li的父级下面的所有li并删除class上的active
target.addClass('active');//添加active
oUser_seleted.find('span').text(target.text())
var map = {};//new map
var spanId = target.parents('.js_goodsSizemob').attr('id');//获取当前点击的li的父级ID
map[spanId] = target.text();//用父级id为KEY（键）获取选中的内容；
var s = $.map(map, function(n){//便利map
return n;
}).join(",");//拼接字符串
oUser_seleted.find('span').text(s);
}
myPub.HamstopPropaga()
});