3 
function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    var div = this.getElementById(makeDivId(this.id));

    if (div) {
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        this.appendChild(div);
    }
}




<label id="1" onclick="labelOnClick()" > BROWSER </label>
<label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label>

上記の例では、ラベルがクリックされたときに要素を作成し、ラベルが再度クリックされたときdivに作成された要素を削除しようとしていますが、機能していません。div

4

3 に答える 3

4

コードにいくつかの問題があります。

  • label onclick="..."イベントハンドラー関数内でインライン（）にイベントハンドラーを割り当てるthisと、グローバルオブジェクト（）を指しますwindow。this関数に引数として渡すことができます。

  • 要素が見つからない場合、変数に結果を割り当てるときに特定のブラウザが失敗しgetElementById()ます（私が間違っている場合は誰かが私を修正します）。

このようなものが機能します：

<script>
function labelOnClick (me) {
    var makeDivId=function (id) {
        return id + "_div";
    };
    var div;

    if (document.getElementById(makeDivId(me.id))) {
        div=document.getElementById(makeDivId(me.id));
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(me.id);

        me.appendChild(div);
    }
}
</script>

<label id="1" onclick="labelOnClick(this)" > BROWSER </label>
<label id="2" onclick="labelOnClick(this)"> GAMING CONSOLE </label>

jsFiddleデモ

于 2011-05-27T12:29:28.297 に答える
1

「ドキュメント」の代わりに「this」キーワードを使用しようとしていますが、「this」は labelOnClick 関数を指しているため機能しません。

function labelOnClick(e)
{
    function makeDivId(id)
    {
        return id + "_div";
    };

    var div = document.getElementById(makeDivId(this.id));

    if (div)
    {
        div.parentNode.removeChild(div);
    }
    else
    {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        var element = e.target;
        element.parentNode.insertBefore(div, element.nextSibling);
    }
}


<label id="1" onclick="labelOnClick(event)" > BROWSER </label>
<label id="2" onclick="labelOnClick(event)"> GAMING CONSOLE </label>

イベント オブジェクトの「ターゲット」プロパティをサポートするもの (たとえば、Internet Explorer ではない) を使用していると仮定して、これを書きました。クロス ブラウザ サポートが必要な場合は、手動で行うか、jQuery や Prototype などのフレームワークを使用できます。

元のコードが書かれた方法では、ラベルごとに div が必要であると想定し、その位置 (ラベルの直後) を推測しました。

于 2011-05-27T12:42:09.863 に答える
1

私の提案は、javascript を使用して div を追加するのではなく、クリック時に div タグの表示スタイル プロパティを変更することです。

function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    //var div = this.getElementById(makeDivId(this.id));

    if (document.getElementById("divID").style.visibility == "visible") {
        document.getElementById("divID").style.visibility = "hidden";          
    } else {
        document.getElementById("divID").style.visibility = "hidden";  
    }
}

    <label id="1" onclick="labelOnClick()" > BROWSER </label>
    <label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label>
于 2011-05-27T12:25:50.437 に答える