在WooCommerce结账时根据发货方式隐藏特定元素

Question

我正在为Wooccommerce添加一个代码片段，以便在选择收货方式时在结账页面上隐藏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，用于更改运输方法-hide-showdiv 50%有效，我通过使用我想要隐藏的div的类更改了div名称。

但是，当我试图保存和激活这个片段时，我遇到了一个错误。

不要恐慌

您试图保存的代码片段在第3行产生了致命错误：

语法错误，意外的"var"(T_var(

该片段的前一版本没有变化，该网站的其余部分应该是和以前一样正常工作。

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

我该如何解决这个问题？

Answer 1

当您在代码中设置特定的运输方法费率Idlocal_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);
}
});
});