jQuery 不隐藏标签和元素

Question

我想在 Woocommerce 中使用 jQuery 来根据 select 框值隐藏我的帐单字段中的表单字段，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.

Answer 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();
    }
  });
});

jQuery 不隐藏标签和元素

jQuery not hiding labels and elements

jquery

woocommerce