Question

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

<?php
    if ( ! defined( 'ABSPATH' ) ) 
        exit; // Exit if accessed directly
?>
<div class="quantity">
    <input class="minus" type="button" value="-">
    <input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
    <input class="plus" type="button" value="+">
</div>

$('.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()但是徒劳。

Answer 1

根据我的上述评论，this answer解释了jQuery的change事件仅由手动浏览器事件触发。因此，通过jQuery更改输入的值 not 会触发change事件，因此我们需要通过调用输入上的.change()手动触发它。

这是我更新的fiddle，显示混合和匹配上下文之外的修复。

具体来说，与混合和匹配有关，我们只需要在更改值后将.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();
    } 
});

我很快就会将此添加到我的常见问题解答中。

Answer 2

@helgatheviking您的代码对我不起作用。但我很高兴您的建议解决了我的问题。我刚刚添加.change()和.val()并且它有效：）

最终代码是：

$('.plus').on('click',function(e){

var val = parseInt($(this).prev('input').val());

$(this).prev('input').val( val+1 ).change();


});
$('.minus').on('click',function(e){

var val = parseInt($(this).next('input').val());
if(val !== 0){
    $(this).next('input').val( val-1 ).change();
} });

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

2 个答案: