jQuery 显示/隐藏不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5954243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show/hide not working
提问by Tim Sullivan
This is really strange, and I've been beating my head against it for hours now and can't figure it out.
这真的很奇怪，我几个小时以来一直在用头撞它，但无法弄清楚。
I'm using jQuery to hide some elements on a form (tagged with the class .read-only) and show other elements (tagged with the class .edit-version).
我正在使用 jQuery 来隐藏表单上的一些元素（用 class 标记.read-only）并显示其他元素（用 class 标记.edit-version）。
Basically, the user clicks an edit link, and within the parent of that link, the read-only items are hidden and the edit items (inputs) are displayed. This works fine.
基本上，用户单击一个编辑链接，在该链接的父链接中，只读项被隐藏，而编辑项（输入）被显示。这工作正常。
The problem happens in the response from the server, which is passing back the opposite case. It finds the div that's hosting the form, and it hides the edit versions and displays the read only. Except it doesn't. Here's the code:
问题发生在来自服务器的响应中，它传递回相反的情况。它找到托管表单的 div，并隐藏编辑版本并显示只读。除了它没有。这是代码：
host = $('#employee-card-49');
$('.edit-version', host).hide();
$('.read-only', host).show();
I've verified that it's got the correct div (#employee-card-49) is found, and is the right item, and is the only item with that id on the page.
我已经验证它找到了正确的 div ( #employee-card-49)，并且是正确的项目，并且是页面上唯一具有该 ID 的项目。
I've verified that $('.edit-version', host).lengthis correct. It returns 3, indicating it's finding the three elements.
我已经验证这$('.edit-version', host).length是正确的。它返回 3，表明它正在查找三个元素。
I've verified that each returned item from $('.edit-version', host)is correct. I can get the properties of them.
我已经验证了每个返回的项目$('.edit-version', host)都是正确的。我可以得到它们的属性。
No javascript errors come up, but the hide() and show() calls just don't modify the display property at all. I've even tried calling css('display', 'none')without avail.
没有出现 javascript 错误，但是 hide() 和 show() 调用根本不修改 display 属性。我什至试过打电话也css('display', 'none')没有用。
If I change the call to $('.edit-version').hide() call, it works, but that would affect other divs on the page that I don't want to affect.
如果我将调用更改为 $('.edit-version').hide() 调用，它会起作用，但这会影响页面上我不想影响的其他 div。
Any help would be appreciated.
任何帮助，将不胜感激。
采纳答案by Tim Sullivan
This isn't a great solution, but it did work. Getting rid of hostscope altogether and instead using the scope in the selector itself solved the problem.
这不是一个很好的解决方案，但它确实有效。host完全摆脱范围，而是在选择器本身中使用范围解决了这个问题。
$('#employee-card-49 .edit-version').hide();
$('#employee-card-49 .read-only').show();
Weird.
奇怪的。
回答by Thomas Shields
I've encountered situations where show()and hide()don't work due to relative positioning. I'd check to make sure you don't have any weird positioning set, or at least that the position of child elements matches the parents. Also, have you double checked that the displayattribute isn't getting set by anything else? maybe something's setting it to block or inline with `!important!
我遇到的情况下show()和hide()不工作由于相对定位。我会检查以确保您没有任何奇怪的定位设置，或者至少子元素的位置与父元素匹配。另外，您是否仔细检查过该display属性没有被其他任何东西设置？也许某些东西将它设置为阻止或内联`!important！
回答by cbmtrx
For what it's worth, I was getting different show/hide behavior between Chrome and Safari. Turns out Safari needed the element AND the ID, not just the ID. So:
对于它的价值，我在 Chrome 和 Safari 之间获得了不同的显示/隐藏行为。事实证明，Safari 需要元素和 ID，而不仅仅是 ID。所以：
$('form#myform').hide(); //Correct
NOT
不是
$('#myform').hide(); //Problematic
Probably better to be verbose anyway.
无论如何，最好是详细的。
回答by Dimitri
Try this:
尝试这个：
host = '#employee-card-49';
$('.edit-version', host).hide()
$('.read-only', host).show();
回答by Gary Green
Try setting it with !importantto make sure nothing else is overriding it. Also try setting another CSS property, that's unlikely to be set just to see if it does act on the objects at all.
尝试设置它!important以确保没有其他东西覆盖它。还可以尝试设置另一个 CSS 属性，这不太可能只是为了查看它是否确实作用于对象。
host = $('#employee-card-49');
$('.read-only', host).css({ display: 'block !important',
visibility: 'visible !important',
// Set unlikely property and see if anything changes
letter-spacing: '10px !important' });
Also check in Firebug:
还要检查 Firebug：
- To see the CSS and any inheritance values it may have.
- The computed width, height, padding, etc of the object (layout & computed tab)
- 查看 CSS 及其可能具有的任何继承值。
- 对象的计算宽度、高度、填充等（布局和计算选项卡）
