Php WooCommerce更新购物车使数字箭头消失_Php_Jquery_Wordpress_Input_Woocommerce

Php WooCommerce更新购物车使数字箭头消失

php jquery wordpress input woocommerce

Php WooCommerce更新购物车使数字箭头消失,php,jquery,wordpress,input,woocommerce,Php,Jquery,Wordpress,Input,Woocommerce,我使用WooCommerce，在购物车页面上我使用自定义数字图标我在这里找到了原始代码：它正在我的现场网站上工作：（你可能需要在购物车上添加一些东西）我遇到的问题是，当我单击加号或减号，然后单击“更新购物车”时，自定义数字图标消失，只剩下数字我的jQuery看起来像： $(function() { // Quantity $('<div class="quantity-nav"><div class="quantity-bu

我使用WooCommerce，在购物车页面上我使用自定义数字图标

我在这里找到了原始代码：

它正在我的现场网站上工作：（你可能需要在购物车上添加一些东西）

我遇到的问题是，当我单击加号或减号，然后单击“更新购物车”时，自定义数字图标消失，只剩下数字

我的jQuery看起来像：

$(function() {
    // Quantity
    $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
    
    $('.quantity').each(function() {
        var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = 999999;
        
        btnUp.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
        
        btnDown.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
    });
});

<script>
        function qtyChange() {
            $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
            
            $('.quantity').each(function() {
                var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = 999999;
                
                btnUp.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue >= max) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue + 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
                
                btnDown.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue <= min) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue - 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
            });

        }

        function cartUpdate() {
            $('button[name="update_cart"], .remove').click(function() {
                setTimeout(function(){
                    qtyChange();
                }, 3000);
                
                setTimeout(function(){
                    cartUpdate();
                }, 3000);
            });
        }

        $(document).ready(function() {
            qtyChange();
            cartUpdate();
        });
    </script>

有人能给我指出正确的方向或解释一下吗？我觉得我只是错过了一些简单的事情

谢谢，
乔希

好的

最初的代码需要做一些调整，但我的一个朋友帮助我实现了这一点：-）

它是开箱即用的，但当我们单击“更新购物车”时，它会停止，所以我们必须创建两个函数来实现这一点

一个用于加号和减号图标，另一个用于按钮本身

我们希望在点击“更新购物车”按钮之前，这项功能立即生效，因此我们在

document.ready

中调用

qtyChange

函数

然后，我们注意到，当点击“更新购物车”按钮时，WooCommerce实际上会删除并重新添加数字输入，因此我们必须在点击按钮后重新执行脚本……但是有一个问题！因为这是使用ajax完成的，并且页面实际上没有重新加载，所以我们需要等到ajax过程完成之后，这样就不会执行得太快。如果我没有对代码设置超时，那么按钮就不会显示，这是我最初的问题

我也有一个问题，我得到的按钮显示，但加号和减号图标没有使输入数字前进或减少，这是什么其他超时功能

最后，我不得不再做一次更改…我添加了

。删除作为选择器，因为每个产品旁边的X也会导致加号和减号图标消失
总而言之，现在它开始工作了。如果我们可以直接修改WooCommerce代码，这会更简单，但这可能会因为插件更新而消失，因此这是一个更好的解决方案：-）
现在，我的代码如下所示：
$(function() {
    // Quantity
    $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
    
    $('.quantity').each(function() {
        var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = 999999;
        
        btnUp.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
        
        btnDown.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
    });
});

<script>
        function qtyChange() {
            $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
            
            $('.quantity').each(function() {
                var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = 999999;
                
                btnUp.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue >= max) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue + 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
                
                btnDown.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue <= min) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue - 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
            });

        }

        function cartUpdate() {
            $('button[name="update_cart"], .remove').click(function() {
                setTimeout(function(){
                    qtyChange();
                }, 3000);
                
                setTimeout(function(){
                    cartUpdate();
                }, 3000);
            });
        }

        $(document).ready(function() {
            qtyChange();
            cartUpdate();
        });
    </script>


函数qtyChange（）{
$（'+-'）。在（“.quantity input”）之后插入；
$（'.quantity'）。每个（函数（）{
var spinner=jQuery（this），
input=spinner.find（'input[type=“number”]”），
btnUp=spinner.find（'.quantity up'），
btnDown=spinner.find（'.quantity down'），
min=input.attr（'min'），
max=999999；
btnUp.click（函数（）{
var oldValue=parseFloat（input.val（））；
如果（旧值>=最大值）{
var newVal=旧值；
}否则{
var newVal=oldValue+1；
}
spinner.find（“输入”）.val（newVal）；
微调器。查找（“输入”）。触发器（“更改”）；
});
单击（函数（）{
var oldValue=parseFloat（input.val（））；
如果（旧值正常
最初的代码需要做一些调整，但我的一个朋友帮助我实现了这一点：-）
它是开箱即用的，但当我们单击“更新购物车”时，它会停止，所以我们必须创建两个函数来实现这一点
一个用于加号和减号图标，另一个用于按钮本身
我们希望在点击“更新购物车”按钮之前，这项功能立即生效，因此我们在document.ready
中调用qtyChange
函数
然后，我们注意到当“更新购物车”按钮被点击，实际上是删除并重新添加数字输入，所以我们必须在点击按钮后重新执行脚本…但是有一个问题！因为这是使用ajax完成的，并且页面实际上没有重新加载，所以我们需要等到ajax过程完成之后，这样就不会有任何内容执行得太快。如果我没有放一个t当我把代码写出来时，按钮就不会出现了，这是我最初的问题
我也有一个问题，我得到的按钮显示，但加号和减号图标没有使输入数字前进或减少，这是什么其他超时功能
最后，我不得不再做一次更改…我添加了。删除作为选择器，因为每个产品旁边的X也会导致加号和减号图标消失
总而言之，现在它正在工作。如果我们可以直接修改WooCommerce代码，这会更简单，但这可能会因为插件更新而消失，所以这是一个更好的解决方案：-）
现在，我的代码如下所示：
$(function() {
    // Quantity
    $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
    
    $('.quantity').each(function() {
        var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = 999999;
        
        btnUp.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
        
        btnDown.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
    });
});

<script>
        function qtyChange() {
            $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
            
            $('.quantity').each(function() {
                var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = 999999;
                
                btnUp.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue >= max) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue + 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
                
                btnDown.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue <= min) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue - 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
            });

        }

        function cartUpdate() {
            $('button[name="update_cart"], .remove').click(function() {
                setTimeout(function(){
                    qtyChange();
                }, 3000);
                
                setTimeout(function(){
                    cartUpdate();
                }, 3000);
            });
        }

        $(document).ready(function() {
            qtyChange();
            cartUpdate();
        });
    </script>


函数qtyChange（）{
$（'+-'）。在（“.quantity input”）之后插入；
$（'.quantity'）。每个（函数（）{
var spinner=jQuery（this），
input=spinner.find（'input[type=“number”]”），
btnUp=spinner.find（'.quantity up'），
btnDown=spinner.find（'.quantity down'），
min=input.attr（'min'），
max=999999；
btnUp.click（函数（）{
var oldValue=parseFloat（input.val（））；
如果（旧值>=最大值）{
var newVal=旧值；
}否则{
var newVal=oldValue+1；
}
spinner.find（“输入”）.val（newVal）；
微调器。查找（“输入”）。触发器（“更改”）；
});
单击（函数（）{
var oldValue=parseFloat（input.val（））；
如果（oldValue）使此有趣的是，产品页面上没有出现这种情况：…单击加号、减号，然后