`

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

多选array方法扩展 
阅读更多
<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()
    });
分享到：
| 下拉列表功能获取数据添加到select表中
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics