Question

我希望用户能够单独使用.hover（）段落（例如：＆＃34; border：1px solid＃900;＆＃34;）并且能够单独点击它以添加/更改背景颜色（＆＃34;选择段落＆＃34;）并再次单击以返回默认背景颜色（＆＃34; diselect paragraph＆＃34;）。由于我是Javascript和jQuery的新手，因此这些段落是动态创建的，并且我很难获得它。

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

这是我正在使用的代码：

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; }

这段代码只是我想要完成的一个例子。任何帮助将不胜感激！

Answer 1

所以这里发生的是在你的代码中，你定义一个函数来创建一个段落，然后设置它的属性。请注意，您'定义了一个函数'。仅这一点就没有任何段落。因此，当您为所有段落设置事件处理程序时，它并不重要，因为您关注的段落尚不存在。

这是你可以做的，将你的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/

修改

P.S 正如你所提到的，你是jQuery的新手，你似乎也是stackoverflow的新用户，我推荐你一个完美问题。正确的代码示例，问题陈述的介绍和您自己努力的证明，以及最好的部分：JSFiddle链接，以便我可以检查我的答案是否正确。太棒了:)）

Answer 2

我已经修改了你的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（）。

Answer 3

您可以将添加事件处理程序的选择器更改为包含元素（.Test），并将p标记提供给on的调用：

$(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

Answer 4

这是我创造的小提琴：

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

希望这有帮助。

由于

Anirban

如何在jQuery中更改动态创建的段落的背景颜色？

4 个答案: