jQuery на странице оформления заказа для изменения способа доставки - скрыть show div 50% работает

Question

Добавление некоторого jQuery на страницу оформления заказа WooCommerce, которая будет скрывать / показывать div в зависимости от способа доставки (локальная доставка).

Первоначально это работает, но из-за ajax-загрузчика WooCommerce при переключении способа доставки скрытый 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 (.f flex-checkout-fields-review_order_before_submit) будет видимым только когда выбран локальный пикап, иначе скрыть.

Как я уже сказал, изначально он работает, но когда вы переключаете метод доставки, мы возвращаемся к исходному положению.

Есть мысли?

Answer 1

Я думаю, что проблема может быть в вашей первой строке, где у вас есть выберите [имя вместо input [name

Вот код, который я использую для того жеЭто должно сработать, если вы измените имя элемента, который хотите скрыть.

Я также устанавливаю и снимаю флажок для отправки по другому адресу в зависимости от выбранного способа доставки.

И, наконец, если требуется доставка, я прокручиваю страницу до адреса доставки.

Удалите эти функции, если они вам не нужны.

// 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);
        }
    } );