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" οnclick="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" οnclick="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);
        }
    }

}