html添加、减少按钮修改

一、HTML

  
<div class="money dis_inli fl_ri">    规格数:<span id="package_number" class="money">5</span></div>
......

<div class="pbr">     <span class="action">          <span id="spanp" class="action-num">

                <span id="reduce1" class="reduce" onclick="decQty(this);">-</span>                <input class="ad_rd_input" id="sub_number" type="tel" name="unit_quantityX" value="{{$sub->package_number}}">                <span id="add1" class="add" onclick="addQty(this);">+</span>          </span>     </span></div>

二、css

.pbr {    position: absolute;    right: 37%;    bottom: 7px;}.action-num {    display: inline-block;    vertical-align: middle;    border: 1px solid rgb(219, 219, 219);    height: 28px;    clear: both;}.reduce {    border-right-color: rgb(219, 219, 219);    border-right-width: 1px;    border-right-style: solid;    position: relative;    z-index: 0;    display: inline-block;    vertical-align: top;    height: 28px;    width: 28px;    text-indent: 0.7em;    float: left;    overflow: hidden;    background-color: rgb(255, 255, 255);}.ad_rd_input {    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    outline: 0px;    box-sizing: border-box;    float: left;    height: 28px;    line-height: 28px;    width: 50px;    vertical-align: middle;    text-align: center;    border: 0px;    margin: 0px;    padding: 0px;    background-color: rgb(255, 255, 255);}.add {    border-left-color: rgb(219, 219, 219);    border-left-width: 1px;    border-left-style: solid;    position: relative;    z-index: 0;    display: inline-block;    vertical-align: top;    height: 28px;    width: 28px;    text-indent: 0.7em;    float: left;    overflow: hidden;    background-color: rgb(255, 255, 255);}

三、js

//减少数量按钮function decQty(obj) {    var itemprice = parseInt($(obj).siblings('#sub_number').val());//获取当前输入框数值    var pag_No = $(obj).parents(".metas").children(".sty_dis").children(".money").children("#package_number").text();    if (itemprice && itemprice != null && itemprice != 0 & (itemprice % pag_No == 0)) {//判断itemprice要满足可用的条件 --存在--不为null--不等于0--是规格数的倍数        console.log(itemprice);        var all_No = parseInt(pag_No);//将规格基数赋值给总数        itemprice -= all_No;//规格基数+输入框值，则不断叠加数        $(obj).siblings('#sub_number').val(itemprice);//写入到输入框    }    else {        if (!itemprice) { //如果输入框的值不存在或者等于0，则赋值为1            $(obj).siblings('#sub_number').val(0);        }        else if (itemprice % pag_No != 0 && pag_No) { //如果规格数存在，但是输入框的值不成倍数，则赋值为规格数            $(obj).siblings('#sub_number').val(pag_No);        }        else {            $(obj).siblings('#sub_number').val(0);        }    }}//添加数量按钮function addQty(obj) {    var itemprice = $(obj).siblings('#sub_number').val();//获取当前输入框数值    var pag_No = $(obj).parents(".metas").children(".sty_dis").children(".money").children("#package_number").text();    if (itemprice && itemprice != null && itemprice != 0 & (itemprice % pag_No == 0)) {//判断itemprice要满足可用的条件 --存在--不为null--不等于0--是规格数的倍数        var all_No = parseInt(pag_No);//将规格基数赋值给总数        all_No += parseInt(itemprice);//规格基数+输入框值，则不断叠加数        $(obj).siblings('#sub_number').val(all_No);//写入到输入框    }    else {        if (!itemprice || (itemprice == 0 && !pag_No)) { //如果输入框的值不存在或者等于0且规格也不存在，则赋值为1            $(obj).siblings('#sub_number').val(1);        }        else if (itemprice % pag_No != 0 && pag_No) { //如果规格数存在，但是输入框的值不成倍数，则赋值为规格数            $(obj).siblings('#sub_number').val(pag_No);        }        else if (pag_No && itemprice == 0) { //如果规格数存在，但是输入框的值为0，则赋值为规格数            $(obj).siblings('#sub_number').val(pag_No);        }        else {//否则            $(obj).siblings('#sub_number').val(1);        }    }}