请求修改jQuery数量增减脚本以实现自定义最小数量逻辑

当然可以实现你需要的自定义最小数量逻辑！我已经基于你提供的原脚本做了针对性修改，完全适配你提出的规则，下面是修改后的完整代码和关键说明：

修改后的JavaScript代码 #

function wcqib_refresh_quantity_increments() { 
    jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function(a, b) { 
        var c = jQuery(b); 
        c.addClass("buttons_added"), 
        c.children().first().before('<input type="button" value="-" class="minus" />'), 
        c.children().last().after('<input type="button" value="+" class="plus" />') 
    }) 
} 

String.prototype.getDecimals || (String.prototype.getDecimals = function() { 
    var a = this, b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); 
    return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0 
}), 

jQuery(document).ready(function() { 
    wcqib_refresh_quantity_increments() 
}), 

jQuery(document).on("updated_wc_div", function() { 
    wcqib_refresh_quantity_increments() 
}), 

jQuery(document).on("click", ".plus, .minus", function() { 
    var a = jQuery(this).closest(".quantity").find(".qty"), 
        b = parseFloat(a.val()), 
        c = parseFloat(a.attr("max")), 
        d = parseFloat(a.attr("min")), 
        e = a.attr("step"); 

    // 初始化默认值
    b && "" !== b && "NaN" !== b || (b = 0), 
    "" !== c && "NaN" !== c || (c = ""), 
    "" !== d && "NaN" !== d || (d = 0), 
    "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1);

    if (jQuery(this).is(".plus")) {
        // 处理加号逻辑
        if (d > 0 && b === 0) {
            // min>0且当前值为0时，直接设为min
            a.val(d);
        } else {
            // 正常递增，不超过max（如果有）
            var newVal = b + parseFloat(e);
            if (c && newVal >= c) {
                a.val(c);
            } else {
                a.val(newVal.toFixed(e.getDecimals()));
            }
        }
    } else {
        // 处理减号逻辑
        if (d > 0) {
            if (b > d) {
                // 当前值大于min，按step递减
                var newVal = b - parseFloat(e);
                a.val(newVal.toFixed(e.getDecimals()));
            } else if (b === d) {
                // 当前值等于min，点击减号直接设为0
                a.val(0);
            }
            // 当前值已经是0，不做操作
        } else {
            // min=0时，正常递减到0为止
            if (b > d) {
                var newVal = b - parseFloat(e);
                a.val(Math.max(newVal, d).toFixed(e.getDecimals()));
            }
        }
    }

    a.trigger("change") 
});

配套的表单代码（可直接使用） #

<div class="quantity buttons_added"> 
    <input type="button" value="-" class="minus"> 
    <input type="number" step="50" min="300" max="" id="1234567" name="1234567" readonly value="0" title="Quantity" class="input-text qty text" size="6" pattern="" inputmode=""> 
    <input type="button" value="+" class="plus"> 
</div>

关键逻辑说明 #

我主要在按钮点击事件的处理部分做了修改，完美匹配你的需求：

• 当min值大于0时：
  • 加号操作：如果输入框当前值是0，点击加号直接跳转到min值；后续点击则按step值正常递增，且不会超过设置的max值（如果有的话）
  • 减号操作：当输入框值大于min时，按step递减；当值刚好等于min时，再次点击减号直接重置为0
• 当min值为0时：
  • 保持原生的递增/递减逻辑，加号从0开始按step累加，减号递减到0后不再变化

你可以直接把修改后的JS代码替换原来的脚本，然后配合对应的表单HTML使用，测试不同的min和step值就能看到效果啦！

内容的提问来源于stack exchange，提问作者dabri