Question

我想知道为什么我会得到＆＃34;显示未定义＆＃34;当谈到这个代码就在这里。这是我正在讨论的页面部分的模拟。我在标题中有javascript，在PHP echo中有html。

<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
$userid = $_SESSION['userid'];
$username = $_SESSION['username'];

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org   /TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript">

function display(id) {
var e = document.getElementById(id);
alert(e.style.display);
if (e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';

}
}
</script>
</head>


<body>
<?php
   if ($username && $userid) {
    echo "<a href=\"javascript: display('menuLinksAdmin');\">MenuLinks</a>
        <div id='menuLinksAdmin' style='display: none;'>
<form action='insert.php' method='post'>
    linktitle:          <input type='text' name='linktitle' />
    linkdescription:    <input type='text' name='linkdescription' />
                        <input type='submit' />
</form>
</div>";

}

else
echo 'somethin up homie';

?>

Answer 1

<强>更新

此问题似乎与范围相关。 jsfiddle默认情况下将脚本代码包装在mootols onload事件中，这会扰乱对display函数的调用。

当选择“无包裹（头部）”时，它可以正常工作。

Answer 2

您的代码在我这里测试过：http://jsfiddle.net/pu3wQ/1/

<a id='menuLinks' href="javascript:display('menuLinksAdmin');">MenuLinks</a>
<div id='menuLinksAdmin' style='display:none;'>
<form action='insert.php' method='post'>
    linktitle: <input type='text' name='linktitle' />
    linkdescription: <input type='text' name='linkdescription' />
    <input type='submit' />
</form>
</div>

<script>
function display(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
    e.style.display = 'none';
}
else {
    e.style.display = 'block';

    }
}
</script>

我认为你的问题在于范围界定。尝试在HTML文件的头部使用JS代码并将标记放在正文中。

如果你对jQuery感到满意，那么这个版本就像你期望的那样工作。 http://jsfiddle.net/pu3wQ/8/

这是一个使用jQuery的更短版本：http://jsfiddle.net/pu3wQ/11/

Answer 3

我会更改函数的名称以更具描述性。另外，在尝试使用元素之前，请检查是否有元素。切换显示属性时，最好在“无”和“”之间切换（见下文）：

function toggleDisplay(id) {

  var element = document.getElementById(id);

  // Only proceed if an element was found
  if (element && element.style) {

    if (element.style.display == 'none') {
        element.style.display = '';  // empty string

    } else {
        element.style.display = 'none';
    }
  }
}

将display设置为''允许它返回默认值（或者它可能继承或由CSS设置的任何值），这可能不是块。此外，如果未明确设置属性，则即使计算值为'block'（或内联块或表或内联表或其他多个值之一），它也将为''。

以上内容可缩短为：

element.style.display = element.style.display == 'none'? '' : 'none';

此外，当其他元素（如按钮或样式范围）更适合作业时，请勿使用A元素和假href。元素具有使其不适合的默认行为。

最后，我会更改函数的名称，使其更符合函数的实际功能，因此：

<span id='menuLinks' onclick="toggleDisplay('menuLinksAdmin');">MenuLinks</span>

然后添加CSS以按照您想要的方式设置样式，可能：

#menuLinks {
  cursor: pointer;
  text-decoration: underline;
}

为什么不切换（style.display）

3 个答案: