0

我想知道为什么在这里涉及此代码时会出现“显示未定义”。这是我正在谈论的页面部分的模型。我在标头中有 javascript，在 PHP 回显中有 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';

?>
4

3 回答 3

1

更新

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

When selected "no wrap (head"), it works fine.

于 2012-11-13T23:37:37.413 回答
0

您的代码在此处测试为我工作：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>

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

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

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

于 2012-11-13T23:43:14.797 回答
0

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

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 设置的任何值），这可能不是阻塞的。此外，如果该属性没有被显式设置，即使计算的值是“块”（或内联块或表或内联表或其他许多值之一），它也会是 ''。

上式可以简写为：

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

此外，当其他一些元素（如按钮或样式跨度）更适合这项工作时，不要使用 A 元素和假 href。A 元素具有使其不适合的默认行为。

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

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

然后添加 CSS 以按照您想要的方式设置跨度样式，也许：

#menuLinks {
  cursor: pointer;
  text-decoration: underline;
}
于 2012-11-13T23:50:25.230 回答