gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-03 06:04:54 30 4
gpt4 key购买 nike

我为 woocommerce 单个产品页面创建了一个加/减数量按钮。创建了一个新的数量-input.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() 多次但没有成功。

最佳答案

根据我的上述评论,this answer解释了 jQuery 的 change 事件仅由手动浏览器事件触发。因此,通过 jQuery 更改输入的值不会触发 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();
}
});

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

关于javascript - Woocommerce 加/减数量按钮更改值但实际上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34595762/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com