jQuery 不隐藏标签和元素答案

【问题标题】：jQuery not hiding labels and elementsjQuery 不隐藏标签和元素
【发布时间】：2022-01-03 12:48:26
【问题描述】：

我想在 Woocommerce 中使用 jQuery 来根据选择框值隐藏帐单字段中的表单字段，jQuery 确实隐藏了元素或标签：我的代码是：


jQuery(document).ready(function(){
    // Your code in here
  jQuery(document).on('input','billing_condition', function() {
 
      mySecFunc();
})
function mySecFunc() {
    // your function code
if(jQuery('#billing_condition').val() == 'house'){
    console.log('before');
    
    jQuery('#billing_complex_name').hide();
    jQuery('label[for="billing_complex_name"]').hide();
    
    jQuery('#billing_complex_address').hide();
    jQuery('label[for="billing_complex_address"]').hide();
    
    jQuery('#billing_complex_address_inside').hide();
    jQuery('label[for="billing_complex_address_inside]').hide();

    console.log('after');
    
}else{
    console.log('before');
    
    jQuery('label[for="billing_address_1"]').hide();
    jQuery('#billing_address_1').hide();
    
    jQuery('label[for="billing_complex_name"]').show();
    jQuery('#billing_complex_complex_name').show();
    jQuery('#billing_complex_address').show();
    jQuery('label[for="billing_complex_address"]').show();
    
    jQuery('#billing_complex_address_inside').show();
    jQuery('label[for="billing_complex_address_inside"]').show();

    console.log('after');
    
}
}})```

The elements were going prior however are not at current nor are the labels.

【问题讨论】：

我认为您应该删除jQuery('label[for="#billing_complex_name"]').hide(); 中的#，但请包含您要使用的html
^^ @CarstenLøvboAndersen 所说的。请记住，# 不是 ID 的一部分，它告诉 CSS 您正在使用 ID 选择器。 ID 就是它后面的东西。 for 属性包含 ID，而不是 CSS ID 选择器。
旁注：如果您将输入 inside 标签，则无需通过 ID 设置它们的关系，这样更易于维护（并且意味着您只需要隐藏标签）。这并不总是可能的，但使用 flex 和 grid，通常是可能的。
同上，换一种说法：$("[for=" + id + "]") vs $("#" + id) - for= 使用 id，而不是选择器

标签： jquery woocommerce

【解决方案1】：

可能在您的输入中尝试keyup 事件，我已经设法解决了您的问题。 DEMO

HTML

<label for="#billing_condition">Label</label>
<input type="text" id="billing_condition"/>

JAVASCRIPT

$(document).ready(function() {
  var input = $("#billing_condition");
  input.keyup(function() {
    if (input.val() == "abc") {
      $('label[for="#billing_condition"]').hide();
    } else {
        $('label[for="#billing_condition"]').show();
    }
  });
});

【讨论】：

你能看看我的完整代码吗？
正如我所说，先尝试 keyup 然后判断问题是否仍然存在。