javascript - jquery 无法隐藏输入名称为 "style"的表单？

Question

我想在网站上隐藏一个表单，但它拒绝通过 jquery 隐藏。我可以手动设置元素的样式属性，但 .hide() 不会隐藏它。

考虑这段代码:

$(document).ready(function() {
    $('form').hide();    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input name="style_name" value="small" type="hidden">
    <p>I AM hidden</p>
</form>
    
<form>
    <input name="style" value="small" type="hidden">
    <p>I should be hidden</p>
</form>

基本上，如果有一个名称为“style”的输入，它就无法隐藏表单。如果输入有不同的名称，它会很好地隐藏它。

发生这种情况是否有原因？

Answer 1

表单中输入元素的“名称”属性用于填充表单 DOM 节点上的属性。您的名称“style”覆盖了表单的“style”属性，这意味着 jQuery 无法再访问 native 样式对象。它需要这样做才能隐藏表单。

请注意 you can still do this with CSS.

$(document).ready(function() {
    $('form').addClass("hidden");    
});

CSS:

.hidden { display: none; }

那些隐式践踏 namespace 的旧习惯可以追溯到浏览器技术的早期。很难想象现在有人认为这是个好主意，至少没有一些合格的子空间(如 form.fields 或其他东西)。