在 WooCommerce 结帐中根据运输方式隐藏特定元素

Question

我正在为 Woocommerce 添加一个代码 sn-p，以便在选择送货方式取货时在结帐页面上隐藏一个 div。

// 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:2" ) ) {
            jQuery( '.lds_plugin' ).slideUp(); // hide shipping address
        } else {
            jQuery( '.lds_plugin' ).slideDown(); // show shipping address
            // scroll to top of shipping address
            jQuery('html, body').animate({
                scrollTop: jQuery(".lds_plugin").offset().top - 120
            }, 1500);
        }
    } );

我从这个链接得到这个代码：jQuery on checkout page for change of shipping method - hide show div 50% works，我通过使用我想隐藏的 div 的类来更改 div 名称。

但是，当我尝试保存并激活此 sn-p 时出现错误。

不要惊慌

您尝试保存的代码 sn-p 在第 3 行产生了一个致命错误：

语法错误，意外的 'var' (T_VAR)

sn-p之前版本不变，本站其余部分应该是 像以前一样正常运行。

请使用浏览器中的后退按钮返回上一页并尝试修复 代码错误。如果您愿意，您可以关闭此页面并放弃您刚刚所做的更改。不 将对本网站进行更改。

我该如何解决这个问题？

Answer 1

由于您在代码中设置了特定的运输方式费率 ID local_pickup:2，而不是针对所有本地取货运输方式，您应该替换：

if ( val.match( "^local_pickup:2" ) ) {

与：

if ( 'local_pickup:2' === val ) {

它会解决你的问题……

---

现在您的代码应该更好地设置如下：

jQuery(document.body).on('change', 'input[name^="shipping_method"]', function() {
    if ( 'local_pickup:2' === jQuery(this).val() ) {
        jQuery('.lds_plugin').slideUp(); // hide shipping address
    } else {
        jQuery('.lds_plugin').slideDown(); // show shipping address
        // scroll to top of shipping address
        jQuery(document.body).animate({
            scrollTop: jQuery('.lds_plugin').offset().top - 120
        }, 1500);
    }
});

或在外部 javascript 文件中，例如：

jQuery( function($){
    $(document.body).on('change', 'input[name^="shipping_method"]', function() {
        if ( 'local_pickup:2' === $(this).val() ) {
            $('.lds_plugin').slideUp(); // hide shipping address
        } else {
            $('.lds_plugin').slideDown(); // show shipping address
            // scroll to top of shipping address
            $(document.body).animate({
                scrollTop: $('.lds_plugin').offset().top - 120
            }, 1500);
        }
    });
});