Question

在WooCommerce结帐页面中添加一些jQuery，以根据运输方式（本地取件）隐藏/显示div。

这最初是可行的，但是由于WooCommerce的ajax加载器在切换运输方式时，当发生更改时，隐藏的div会消失。

我不确定切换发生后如何再次触发代码。

jQuery('form.checkout').on('change','select[name^="shipping_method"]',function() {
    var val = jQuery( this ).val();
    if (val.match("^local_pickup")) {
                jQuery('.flexible-checkout-fields-review_order_before_submit').fadeIn();
        } else {
                jQuery('.flexible-checkout-fields-review_order_before_submit').fadeOut();
    }
});

我希望div（.flexible-checkout-fields-review_order_before_submit）仅在选择本地取件时可见，否则隐藏。

就像我说的那样，它最初是可行的，但是当您更改运输方式时，我们又回到了平方。

有什么想法吗？

Answer 1

我认为问题可能出在您的第一行，而您选择选择[名称，而不是输入[名称

这是我用于同一件事的一些代码，因此如果您更改要隐藏的元素的名称，它应该对您有用。

我还会根据选择的运送方式选中并取消选中“运送至不同地址”复选框。

最后，如果需要运送，我将页面向上滚动到运送地址。

如果您不想要这些功能，请删除它们。

// When shipping method is selected
    jQuery( 'form.checkout' ).on( 'change', 'input[name^="shipping_method"]', function () {
        var val = jQuery( this ).val();
        if ( val.match( "^local_pickup" ) ) {
            jQuery( '#ship-to-different-address-checkbox' ).prop( "checked", false ); // untick shipping checkbox
            jQuery( '.shipping_address' ).slideUp(); // hide shipping address
        } else {
            jQuery( '.shipping_address' ).slideDown(); // show shipping address
            jQuery( '#ship-to-different-address-checkbox' ).prop( "checked", true ); // tick shipping checkbox
            // scroll to top of shipping address
            jQuery('html, body').animate({
                scrollTop: jQuery(".shipping_address").offset().top - 120
            }, 1500);
        }
    } );

结帐页面上的jQuery用于更改送货方式-隐藏show div 50％的作品

1 个答案: