在jquery中顯示/隱藏div

我想根據條件顯示並隱藏div（對於本示例中的facebook）。這是我使用的代碼，但由於某種原因，警報工作，但它仍然顯示div。有人可以幫助調試。謝謝。在jquery中顯示/隱藏div

<?php 
     // call the function to parse the signed request 
$sr_data = mySignedRequest(); 

// check like status 
if ($sr_data->page->liked==1) { 
    echo '<script language="javascript"> 
     alert("Hello You Are a Fan");  
      document.getElementById("header").style.display = "block"; 
     </script>'; 
} else { 
    echo '<script language="javascript"> 
     alert("You are not a fan");  
      document.getElementById("header").style.display = "none"; 
     </script>'; 
} 

?> 
<div id="header"> 

Hello You Are a Fan 
</div><!-- #header -->

來源

2011-11-23 kidA

我認爲如果你寫出你的腳本標籤，就像你在你的div下面和腳本標籤內部做類似'alert（'<？php echo $ sr_data-> page-liked == 1？「你好......」：「你是......」;？>'）;'這會爲你節省一堆代碼。我知道這不是問題，但我只是說;） – mraaroncruz

或更類似於maxedison的低於 – mraaroncruz

這是一個典型的代碼嘗試訪問元素，雖然他們還不存在的例子。你只是用getElementById獲取元素，但是元素僅在之後的所有JavaScript代碼中定義了。您可以使用$(document).ready。此外，jQuery有.hide和.show所以你不需要getElementById和style.display：

echo '<script language="javascript"> alert("Hello You Are a Fan"); $(document).ready(function() { // only run when all elements are available $("#header").show(); }); </script>';

來源

2011-11-23 16:28:53 pimvdb

這不是在JS代碼運行的時間，因爲工作，#header尚不存在於頁面上。如果您將PHP（因此JS）移到#header div下面，它將起作用。

更好的方法是按照pimvdb的建議將JS打包在$(document).ready()調用中。

然而，我不認爲這會給你一個好的結果，因爲#header實際上會短暫可見，然後消失。要解決這個特定的情況下，最好的辦法是做這樣的事情：

<?php 

if ($sr_data->page->liked==1) { 
    $display = 'block'; 
} else { 
    $display = 'none'; 
} 

?> 

<div id="header" style="display:<?php echo $display ?>"> 

Hello You Are a Fan 
</div>

通過嵌入與DIV正確的風格的行內，它永遠不會當它不應該出現。

來源

2011-11-23 16:28:59 maxedison

+1的JavaScript實際上是在這裏矯枉過正。 – pimvdb

也可以。我不能檢查兩件事......我猜。感謝這個替代解決方案。 – kidA

你不能檢查2件東西嗎？ – maxedison

-1

更改document.getEle ...以下：

$(document).ready(function() {  
    $("#header").show(); 
});

或

$(document).ready(function() {  
    $("#header").show(); 
});

來源

2011-11-23 16:29:23 Joshua

nope。正如其他人已經指出的那樣，'＃header'還不存在。 – maxedison

謝謝 - 我忽略了這一點。答案已更新。 – Joshua

改變代碼塊的順序：先顯示HTML

<div id="header"> 

Hello You Are a Fan 
</div><!-- #header --> 
<?php 
     // call the function to parse the signed request 
$sr_data = mySignedRequest(); 

// check like status 
if ($sr_data->page->liked==1) { 
    echo '<script language="javascript"> 
     alert("Hello You Are a Fan");  
      document.getElementById("header").style.display = "block"; 
     </script>'; 
} else { 
    echo '<script language="javascript"> 
     alert("You are not a fan");  
      document.getElementById("header").style.display = "none"; 
     </script>'; 
} 

?>

因爲當JS乳寧， #header dom不是退出。

來源

2011-11-23 16:31:21 island205

在jquery中顯示/隱藏div

回答

相關問題