3

ユーザーが段落を個別に.hover()できるようにし(例: "border:1px solid#900;")、個別にクリックして背景色を追加/変更できるようにします( "selectparagraph")。もう一度クリックすると、デフォルトの背景色に戻ります(「段落の選択を解除」)。この段落は動的に作成され、JavascriptとjQueryを初めて使用するため、取得するのに苦労しています。

http://jsfiddle.net/RzvV5/8/

これは、Imが使用しているコードです。

jQuery

$(document).ready(function(){
$("#push").on({
    click: function(){
        var pr = $('<p class="test">Test</p>');
        var d = $(".Test");
        $(pr).clone().appendTo(d); 
    }
});

$("p").on({
          mouseenter: function(){    
                     $(this).addClass("inside"); 
          },
          mouseleave: function(){                             
                     $(this).removeClass("inside");  
}

});



});

HTMLコード:

<html>
<body>
    <a href="#" id="push">Push</a>
<div class="Test"></div>
    </body>
</html>

Cssコード:

.test { color: #000; padding: .5em; border: 1px solid black;} 
.active { background-color: ;}
.inside { background-color: #900; }

このコードは、imが達成しようとしていることの単なる例です。どんな助けでもありがたいです!

4

4 に答える 4

2

ここで起こっていることは、コードで、段落を作成する関数を定義してから、そのプロパティを設定するということです。「関数を定義する」ことに注意してください。それだけでは何の段落にもなりません。したがって、すべての段落にイベント ハンドラーを設定しても、関心のある段落はまだ存在しないため、実際には問題になりません。

これはあなたができることです、あなたのjQuery部分を次のように変更してください:

$(document).ready(function(){
    $("#push").on({
        click: function(){
            var pr = $('<p class="test">Test</p>');
            var d = $(".Test");
            var pclone = $(pr).clone();
            pclone.on({
                mouseenter: function(){    
                    $(this).addClass("inside");
                },
                mouseleave: function(){                             
                    $(this).removeClass("inside");  
                }
            });
            pclone.appendTo(d);
        }
    });
});

結果を確認できるように、JSFiddle をもう少し編集しました: http://jsfiddle.net/RzvV5/16/

編集

PSあなたが jQuery の初心者であり、stackoverflow の新規ユーザーでもあると述べたように、完全に尋ねられた質問をお勧めします。適切なコード例、問題の説明と自分の努力の証明による紹介、そして最良の部分: 私の答えが正しいかどうかを確認できる JSFiddle リンク。素晴らしいです:)

于 2012-04-19T01:44:05.767 に答える
1

JQuery コードを変更しました。コピーして貼り付けて試してみてください。かなり醜いですが、急いで書きました。基本的に、クリックすると、背景が赤い段落が作成されます。クリックすると青くなります。もう一度クリックすると赤くなります。コードはかなり自明です。それが役立つことを願っています!

$(document).ready(function(){
    $("#push").on({
        click: function(){
            $('<p>Test</p>').css("background-color","red").appendTo('.Test');
        }
    });

$('.Test').on("click", "p", function(){  
    var cur = $(this).css('background-color');
    if(cur=="rgb(255, 0, 0)") {  
        $(this).css("background-color","blue");
    } else {                      
        $(this).css("background-color","red");
    }
    });
});

編集:非推奨の .live() の使用を置き換えました。

于 2012-04-19T02:26:03.250 に答える
0

イベントハンドラーを追加するセレクターを包含要素(.Test)に変更し、onの呼び出しにpタグを指定できます。

$(document).ready(function(){
    $("#push").on({
        click: function(){
            var pr = $('<p class="test">Test</p>');
            var d = $(".Test");
            $(pr).clone().appendTo(d); 
        }
    });

    $(".Test").on( "mouseenter", "p", function(){    
        $(this).addClass("inside"); 
    });
    $(".Test").on( "mouseleave", "p", function(){                            
        $(this).removeClass("inside");  
    });
});

.onは、動的に作成された要素にイベントハンドラーを効果的にアタッチできるという点で、.liveに似ていますが、ハンドラーをルートドキュメントにアタッチしないため、はるかに効率的です。jQuery 1.7でのイベント処理のさまざまな方法の説明を以下に示します(.onを使用する理由と方法とともに):http ://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs- live.html

于 2012-04-19T02:38:12.807 に答える
0

ここに私が作成したフィドルがあります:

http://jsfiddle.net/RzvV5/80/

お役に立てれば。

ありがとう

アニルバン

于 2012-04-19T02:56:20.677 に答える