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下面，它就会起作用。

更好的方法是将p包裹在$(document).ready()调用中，如pimvdb建议的那样。

但是，我认为这不会给你一个好结果，因为#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>';
}

?>

因为在运行时，＃header dom不会退出。

Answer 4

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

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

或

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

在jquery中显示/隐藏div

4 个答案: