在jQuery中显示/隐藏div

Question

我试图根据条件显示和隐藏div（在本示例中为facebook）。 这是我正在使用的代码，但是由于某种原因，警报起作用了，但仍显示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 -->

Answer 1

这是代码尝试访问尚不存在的元素的典型示例。 您就是使用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>';

Answer 2

它不起作用，因为在运行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中嵌入正确的样式，它永远不会在不应该显示的时候显示出来。

Answer 3

更改代码块顺序：首先是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不会退出。

Answer 4

将document.getEle ...更改为以下内容：

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

要么

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