jQuery 不隐藏标签和元素

Posted 2023-03-25

【中文标题】jQuery 不隐藏标签和元素

【英文标题】：jQuery not hiding labels and elements

【发布时间】：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，而不是选择器

【参考方案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 然后判断问题是否仍然存在。