logo标签列表

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

javascriptjquerydynamic
3
我希望用户能够使用.hover()方法单独悬停在段落上（例如："border:1px solid #900;"），并且也能够单独点击它来添加/更改背景颜色（"选择段落"），再次点击以返回默认背景颜色（“取消选择段落”）。这些段落是动态创建的，由于我刚学习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; }

这段代码只是我试图实现的一个示例。任何帮助都将不胜感激！

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/ 编辑：
P.S. 正如你所提到的，你是jQuery的新手，似乎也是stackoverflow的新用户，我为你完美的问题提问方式点赞。适当的代码示例、问题陈述和自己努力的证明，最棒的部分是：一个JSFiddle链接，这样我就可以检查我的答案是否正确。做得好 :)
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()方法。

live()已被弃用，请使用1.7.1版本之后的on()方法。http://api.jquery.com/live/ 自jQuery 1.7起，.live()方法已被弃用。请使用.on()来附加事件处理程序。使用旧版本jQuery的用户应优先使用.delegate()而非.live()。 - Andreas Wong
谢谢NiftyDude，我之前不知道那个。我可能跟不上时代了。我已阅读更改内容并修改了原始语句以替换live()。 - Johnnyoh
0
0

你可以将事件处理程序添加到包含元素（.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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接