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関数の呼び出しが台無しになります。

「ラップなし（ヘッド）」を選択すると正常に動作します。

于 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>

あなたの問題はスコーピングにあると思います。HTMLファイルの先頭部分にJSコードを配置し、本文にマークアップを付けてみてください。

jQueryに慣れている場合は、期待どおりに機能するバージョンがここにあります。 http://jsfiddle.net/pu3wQ/8/

jQueryを使用したはるかに短いバージョンは次のとおりです：http：//jsfiddle.net/pu3wQ/11/

于 2012-11-13T23:43:14.797 に答える
0

関数の名前を、それが何をするかをより説明するものに変更します。また、何かをしようとする前に、要素を取得することを確認してください。また、表示プロパティを切り替えるときは、"none" と "" を切り替える方がはるかに優れています (以下を参照)。

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' (または inline-block または table または inline-table またはその他の多くの値のいずれか) であっても '' になります。

上記は次のように短縮できます。

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;
}
于 2012-11-13T23:50:25.230 に答える