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顯示/隱藏不工作

回答

相關問題