0

フォームの表示を切り替えるjavascript関数があります。

<script type="text/javascript">
function showHide(){
    var toggle = document.getElementById('form');
    if(toggle.style.display == 'none')
         toggle.style.display = 'block';
    else
         toggle.style.display = 'none';
}
</script>

このリンクで正常に動作しています。

<a href="#" onclick="showHide()">Add new:</a>

しかし、このリンクでこの関数を使用すると、機能しません。このリンクをクリックすると、ページが再読み込みされ、非表示のコンテンツが表示されません。

<a href="products.php?act=edit&id=1" onclick="showHide()">Edit</a>

これがデモです： products.php

「新規追加：」リンクと「編集」リンクの両方を同じように機能させて、ページをリロードせずにフォームを表示または非表示にします。

4

3 に答える 3

3

勇気があるので、あなたはこのように行くことができます：

<script type="text/javascript">
function showHide(){
    var toggle = document.getElementById('form');
    if(toggle.style.display == 'none')
         toggle.style.display = 'block';
    else
         toggle.style.display = 'none';
    document.location.href = 'http://yourdomain.com/products.php?act=edit&id=1'; //<<<<
}
</script>


<a href="#" onclick="showHide()">Add new:</a>

しかし、何を理解しないでください=）

于 2012-12-31T08:57:49.773 に答える
1

別のページにリンクしている/現在のページをリロードしている場合（これによりすべての状態が失われます）、divの可視性を新しいページに渡す何らかの方法が必要です。あなたは出来る

<a href="products.php?act=edit&id=1&visible=formVisible" onclick="showHide()">Edit</a>

トグル関数で値を設定するformVisibleか、リンクを動的に変更する必要があります...これを実現する方法はたくさんあります。

補足として、JavaScriptでトリプルイコールを使用する必要があります

if(toggle.style.display === 'none')
于 2012-12-31T09:00:29.400 に答える
1

まず、関数を単純化できます。

function showHide(){
    var toggleStyle = document.querySelector('#form').style;
    toggleStyle.display = toggleStyle.display ? '' : 'none';
}​

このjsfiddleを参照してください

次に、クリックアクションは機能しますが、hrefがページの更新をトリガーするため、表示されません。を使用する場合showHideは、hrefに次のようなパラメータを追加し、ページ読み込み時<a href="products.php?act=edit&id=1&showform=1">の値を使用して可視性をトリガーできます。showformまたは、Cookieを使用して、フォームの表示状態を「記憶」することもできます。3番目の方法は、XmlHTTPRequest（XHR、別名Ajax）を使用して、ページの更新を防ぐことです。

于 2012-12-31T09:16:10.287 に答える