jQuery显示/隐藏不工作

这真的很奇怪，我已经打了几个小时对付它，现在已经打了几个钟头，但无法弄清楚。我使用jQuery隐藏窗体上的某些元素（用类.read-only标记）并显示其他元素（用类.edit-version标记）。jQuery显示/隐藏不工作

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

问题发生在服务器的响应中，服务器正在回传相反的情况。它会找到承载该表单的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。

任何帮助，将不胜感激。

来源

2011-05-10 Tim Sullivan

是否有可能创建代码演示（可能在[jsFiddle]（http://jsfiddle.net））？ – 2011-05-10 17:55:42

;之后.hide（） – 2011-05-10 17:57:07

@Scott，这是我的错字这里;有一个;在代码中。我纠正了它。 @火箭：演示现在很难做。它还没有公开发布，而且它还很大。 – 2011-05-10 18:00:24

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

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

奇怪。

来源

2011-05-10 18:16:42

问题出现在哪个浏览器中？你使用的是什么版本的jQuery？ – brianpeiris 2011-05-10 18:19:42

Safari 5.0.5，使用jQuery 1.6，但是当我使用jQuery 1.4.4，iirc时发生了问题。 – 2011-05-10 19:25:57

我遇到过show()和hide()由于相对定位而不工作的情况。我会检查以确保您没有任何奇怪的定位设置，或者至少要确保子元素的位置与父母相匹配。另外，你有没有检查display属性没有被其他设置设置？也许有人设置它阻止或内联`！重要！

来源

2011-05-10 17:57:38

＃＃employee-card-49' div中没有奇怪的定位，但是它包含在浮动div中，就像弹出窗口一样。没有！重要的CSS修饰符。谢谢！ – 2011-05-10 18:05:55

您能否详细说明相对位置影响隐藏和显示的情况？我有一个问题，一个元素没有隐藏，我认为相对的位置可能是原因。谢谢！ – 2013-08-20 06:42:26

谢谢，这只是解决了我的问题。我有一个！重要的标签，防止隐藏工作。 – Citizen 2014-05-22 15:55:34

试试这个：

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

来源

2011-05-10 17:59:52 Dimitri

这没有帮助。谢谢，不过。 – 2011-05-10 18:02:30

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

来源

2011-05-10 18:13:57

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

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

不

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

可能会更好反正详细。

来源

2015-05-15 13:23:33 cbmtrx

jQuery显示/隐藏不工作

回答

相关问题