2

ここに私のHTMLとJavaScriptコードがあります:

HTML:

<div id="common">
    Hi Welcome
</div>

<div>
    <a href="javascript:toggleDiv('customize');" >click here</a>
</div>

<div  id="customize">
    <form action="" method="post" id="MyForm">
        {%  form%}
    </form>
</div>

Javascript コード:

<script>
    function toggleDiv(divId) {
        if ($("#"+divId).show()) {
            $("#common").hide();
        }
        else {
            $("#common").show();
        }
    }
</script>

リンク「ここをクリック」をクリックすると、1 つの div id が非表示になり、別の div id が表示され、別の時間にクリックすると、その逆のプロセスが発生するはずです。この JavaScript を使ってみましたが、正しく動作しません

4

5 に答える 5

1

:visible渡された div が既に表示されているかどうかを確認するために使用する必要があります。これを試して：

function toggleDiv(divId) {
    var $el = $("#" + divId);
    if ($el.is(":visible")) {
        $el.hide();
        $("#common").hide();
    }
    else {
        $el.show();
        $("#common").show();
    }
}

onclickまた、不格好な属性の代わりに jQuery を使用してイベントをアタッチするようにコードを変更する必要があります。

<a href="#" id="link" data-rel="other-div">click here</a>

$("#link").click(function(e) {
    e.preventDefault();
    toggleDiv($(this).data("other-div"));
});
于 2012-05-16T09:27:14.563 に答える
1

これを試して：

function toggleDiv(divId) {
    if ($("#"+divId).is(':visible')) {
        $("#common").hide();
    }
    else {
        $("#common").show();
    }
}
于 2012-05-16T09:28:36.617 に答える
0

コードは常に に入りますがif、else. の戻り値をshow評価しています。これは常に true と評価される jQuery オブジェクトです。

isメソッドと:visibleセレクターを使用して、要素が現在表示されているかどうかを確認します。

function toggleDiv(divId) {
    if ($("#"+divId).is(":visible")){
        $("#common").hide();
    }
    else{
        $("#common").show();
    }
}

余談ですが、イベント ハンドラー コードを HTML の外に移動して jQuery にバインドしてみてはいかがでしょうか (以下では、リンクに "yourLink" という ID を与えることを前提としています)。

$("#yourLink").click(function() {
    //Event handler
});
于 2012-05-16T09:26:52.903 に答える