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（）调用根本不会修改display属性。我甚至尝试过css('display', 'none')无效。

如果我将调用更改为$（'。edit-version'）。hide（）调用，它可以工作，但这会影响页面中我不想影响的其他div。

任何帮助都将不胜感激。

Answer 1

我遇到show()和hide()由于相对定位而无效的情况。我会检查以确保您没有任何奇怪的定位集，或者至少是子元素的位置与父母匹配。另外，您是否仔细检查了display属性是否未被其他任何设置设置？也许正在设置阻止或内联`！important！

Answer 2

这不是一个很好的解决方案，但确实有效。完全摆脱host范围而不是在选择器中使用范围本身就解决了这个问题。

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

怪异。

Answer 3

试试这个：

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

Answer 4

尝试使用!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及其可能具有的任何继承值。
对象的计算宽度，高度，填充等（布局和计算选项卡）

Answer 5

对于它的价值，我在Chrome和Safari之间获得了不同的显示/隐藏行为。原来Safari需要元素和ID，而不仅仅是ID。所以：

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

不是

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

无论如何都可能更好。

jQuery显示/隐藏不起作用

5 个答案: