问题描述
我试图根据选择的送货方式（首先加载页面），然后在用户选择其他方式或更新购物车时，在购物车页面上隐藏送货计算器（使用jQuery），这将启用/禁用新的送货方式，但我似乎无法使其正常工作。
我的Javascript / jQuery非常生锈，所以我不知道自己在做什么错。
下面是我尝试过的代码。它的工作方式就像我希望页面加载一样（=如果选择“免费送货”，或者如果它是唯一可用的送货方式，则送货计算器将被隐藏。
但是，当我选择其他送货方式时，除非我手动重新加载页面，否则送货计算器将不会再次显示。
如果购物车更新了额外的产品数量（通过直接在购物车页面上增加产品数量）以达到可以免费送货的最低数量，则也将无效。
jQuery(document).ready(function() {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
jQuery(".woocommerce-shipping-calculator").css("display","none");
}
else{
jQuery(".woocommerce-shipping-calculator").css("display","block");
}
});
jQuery("input[type=radio]").click(function() {
if(jQuery("*[id*=free_shipping]").is(':checked')){
jQuery(".woocommerce-shipping-calculator").css("display","none !important");
}
else{
jQuery(".woocommerce-shipping-calculator").css("display","block !important");
}
})
任何帮助将不胜感激！
谢谢
解决方法
尝试以下脚本，它将起作用。实际上，在每个单选框选择上，运输选择器都在重新加载，并且每当您重新加载HTML元素时，.click（）事件都需要与此进行新的绑定。在jQuery中，我们以前曾将其称为.live（），现在我们使用.on（）。使用相同的选择器或标识，重新绑定的新元素将使绑定保持完整。
jQuery(document).ready(function($) {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
jQuery(".woocommerce-shipping-calculator").css("display","none");
}
else{
jQuery(".woocommerce-shipping-calculator").css("display","block");
}
jQuery('body').on('click',"input[type=radio]",function() {
if(jQuery("*[id*=free_shipping]").is(':checked')){
setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();},500);
}
else{
setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();},500);
}
});
});
非常感谢您的解释和代码。
除了我尝试更新购物车时，它几乎可以正常运行。如果我有一辆足以触发免费送货的购物车（超过150欧元），然后我删除了一个产品，在下面有一个购物车150欧元，然后单击“更新购物车”，则将显示常规的送货方式，但送货计算器不会再次显示。 要再次显示它，我必须单击一种送货方式的单选按钮。
我试图将您提供给我的代码进行类似的工作，但是无法使其工作：/
def create_task_from_json(json_obj):
new_task = Task(id = json_obj.get("id"),title = json_obj.get("title"),description = json_obj.get("description"),priority = json_obj.get("priority"),categoryid = json_obj.get("categoryid"))
我尝试使用jQuery(document).ready(function($) {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
jQuery(".woocommerce-shipping-calculator").css("display","none");
}
else{
jQuery(".woocommerce-shipping-calculator").css("display","block");
}
jQuery('body').on('click',function() {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();},500);
}
else{
setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();},500);
}
});
});
jQuery("input[type=submit]").on('click',function() {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();},500);
}
else{
setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();},500);
}
});
而不是".button"，并且还尝试将这段额外的代码放入整个"input[type=submit]"中。
我还有一个问题：隐藏/显示运费计算器不会与内部WooCommerce功能混淆吗？因为我也张贴在wordpress.org上，并且Woo支持人员告诉我这是一个相当复杂的开发主题。所以我想知道我是否应该这样做？
再次感谢！