当前位置:  开发笔记 > 编程语言 > 正文

Woocommerce加/减数量按钮更改值但实际上不起作用

如何解决《Woocommerce加/减数量按钮更改值但实际上不起作用》经验,为你挑选了1个好方法。

我为woocommerce单品页面创建了一个加/减数量按钮.创建了一个新的quantity-input.php


min="" max="" name="" value="" title="" class="input-text qty text" size="4" />
$('.plus').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').attr( 'value', val+1 );
});

$('.minus').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val( val-1 );
    } 
});

上面的代码改变了文本视觉框的值,但没有改变代码中的值.因此,woocommerce没有任何数量的变化.另一方面,如果我按下键盘的上/下按钮,价值的变化正在通过woocommerce获得.我认为它正在发生,因为我已经使用.val()而不是.attr(),我改变了attr()很多次但是徒劳无功.



1> helgatheviki..:

继上述评论之后,这个答案解释了jQuery的change事件只是由手动浏览器事件触发.因此,通过jQuery更改输入的值不会触发change事件,因此我们需要通过调用.change()输入手动触发它.

这是我更新的小提琴,显示混合和匹配上下文之外的修复.

具体来说,与混合和匹配有关,我们只需要.change()在更改值后将事件链接到输入.我调整了如何识别输入,但这并没有太大的区别.

编辑:现在考虑输入的"步骤".

$('.quantity').on('click', '.plus', function(e) {
    $input = $(this).prev('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    $input.val( val + step ).change();
});

$('.quantity').on('click', '.minus', 
    function(e) {
    $input = $(this).next('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    if (val > 0) {
        $input.val( val - step ).change();
    } 
});

我很快就会把它添加到我的常见问题中.

推荐阅读
臭小子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有