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

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)，并将 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

于 2012-04-19T02:38:12.807 回答
0

这是我创建的小提琴：

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

希望这可以帮助。

谢谢

阿尼尔班

于 2012-04-19T02:56:20.677 回答