0

下にJSがあり、画像の下で画像をクリックするとメニュー項目を表示しようとしていますが、項目をクリックすると表示されなくなります。複数の画像があるので、この動的コンテンツメニューを作成しています。userMenuContent内にたくさんのhtml要素を追加することを計画しています。

using var userMenuContent ="<div><form>...</<form></div>";

しかし、最初に私の小さなテストは失敗します

function userMenu() {
    var userMenudiv = document.createElement("div");
    userMenudiv.setAttribute("class", "statusContainer");
     var userMenuContent = "<p>test</p>";
    $(userMenudiv).append($(userMenuContent));
    $(userMenudiv).hide();
    this.appendChild(userMenudiv);
    $(userMenudiv).slideDown();
}

    <img  class="icon" src="image.png" onclick="userMenu()"/>

画像をクリックすると、TypeErrorが発生します。this.appendChildは関数ではありません。私はjquery1.8.3とjquery-ui1.8.24を使用しています

4

1 に答える 1

2

「これ」は、画像ではなくウィンドウオブジェクトを指します。

インラインイベントハンドラーは使用しないでください。DOM要素にIDを付けて、そのように選択します。

画像にdivを追加することはできません。代わりに、別のターゲット要素を指定する必要があります

jQueryを使用しているので、jQueryの方法で実行してください。

$(document).ready(function(){

    $('#userMenuImg').click(function(){

        $('#target')
            .append('<div class="statusContainer"><p>test</p></div>')
            .slideDown();

    });

});
<img id="userMenuImg" class="icon" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMKbTxKTOJbJvVTt2SZak49lARNnCU4D7ECfZn1KspIn6SXDHz3A">

<div id="target"></div>

</ p>

于 2013-01-03T04:43:30.303 に答える