jQuery show/hide不起作用

Question

这真的很奇怪，我已经花了几个小时努力解决它，但还是无法弄清楚。

我正在使用jQuery隐藏表单上的一些元素（标记为类.read-only），并显示其他元素（标记为类.edit-version）。

基本上，用户点击编辑链接，在该链接的父级内隐藏只读项目并显示编辑项目（输入）。这个工作正常。

问题出现在来自服务器的响应中，它返回相反的情况。它找到承载表单的div，隐藏编辑版本并显示只读版本。但事实并非如此。以下是代码：

host = $('#employee-card-49');
$('.edit-version', host).hide();
$('.read-only', host).show();

我已经确认正确的div（#employee-card-49）被找到，是正确的和页面上唯一拥有该id的项目。

我已经验证$('.edit-version', host).length是正确的。它返回3，表示找到了三个元素。

我已经验证$('.edit-version', host)返回的每个项目都是正确的。我可以获取它们的属性。

没有javascript错误出现，但是hide()和show()调用根本不修改显示属性。我甚至尝试过调用css('display', 'none')也无济于事。

如果我改变 $('.edit-version').hide() 调用，它可以正常工作，但这会影响到我不想影响的页面上的其他div。

希望能得到任何帮助。

- Tim Sullivan

---

是否可以创建代码演示（在jsFiddle上）？ - gen_Eric

@Scott，这是我的笔误；代码里有一个;。我已经更正了。@Rocket：现在很难做演示。它还没有公开，而且把它放到一个fiddle里面很大。 - Tim Sullivan

@Scott 没有 ; 不会导致任何错误。 - Naftali

服务器响应是通过AJAX吗？如果是AJAX，响应包含HTML、数据还是脚本？您确定您是在回调函数中执行hide/show操作，还是忘记了响应是异步的？ - brianpeiris

响应是通过AJAX返回的。它返回上面的脚本。如果我在那里放一个警告，它会运行并显示警告，没有问题。另外，我应该提到，如果我从$（' .edit-version '）调用中删除host，它将正常工作。但是，这将影响到其他我不想影响的div。 - Tim Sullivan

Answer 1

我遇到过一些情况，show()和hide()由于相对定位而无法正常工作。请检查您是否设置了奇怪的定位，或者至少子元素的位置与父元素匹配。此外，您是否仔细检查display属性是否被其他内容设置？也许有些东西将它设置为块级元素或带有`!important`的内联元素。

- Thomas Shields

---

#employee-card-49 div内部没有奇怪的定位，但它包含在一个像弹出窗口一样的浮动div中。没有使用!important的CSS修饰符。谢谢！ - Tim Sullivan

你能详细说明一下相对位置影响隐藏和显示的情况吗？我遇到了一个问题，一个元素没有被隐藏，我认为相对位置可能是原因。谢谢！ - Owen McAlack

谢谢，这解决了我的问题。我有一个 !important 标签导致隐藏无效。 - Citizen

Answer 2

这不是一个很好的解决方案，但它确实起作用了。完全摒弃host范围，而是在选择器本身中使用范围来解决问题。

$('#employee-card-49 .edit-version').hide();
$('#employee-card-49 .read-only').show();

奇怪。

- Tim Sullivan

---

问题出现在哪个浏览器上？您使用的jQuery版本是什么？ - brianpeiris

Safari 5.0.5，使用jQuery 1.6，尽管我记得当时使用的是jQuery 1.4.4，问题仍然发生了。 - Tim Sullivan

Answer 3

说句实话，我在Chrome和Safari之间得到了不同的显示/隐藏行为。结果发现Safari需要元素和ID，而不仅仅是ID。所以：

$('form#myform').hide(); //Correct

不是

$('#myform').hide(); //Problematic

可能更好的做法是尽量详细地表达。

- cbmtrx

Answer 4

试试这个：

host = '#employee-card-49';
$('.edit-version', host).hide()
$('.read-only', host).show();

- Dimitri

---

那并没有帮助。不过还是谢谢。 - Tim Sullivan

Answer 5

尝试使用!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' });

还可以在 Firebug 中检查：

• 查看 CSS 和任何可能继承的值。
• 该对象的计算宽度、高度、填充等（布局和计算选项卡）。

- Gary Green