jQuery append()函数不附加每个<p>元素

Question

我是JavaScript的新手.完整代码在这里(无法在问题的主体中输入jQuery).

以下是代码的JS部分

$(document).ready(function(){
    $("#btn1").click(function(){
        var newtext =  $("<b>It works!</b>");
        newtext.hide();
        $("p").append(newtext);
        newtext.fadeIn();
    });
});

我打算做的是,当用户点击按钮("#btn1")时,一段新文本("It works!")应出现在HTML 的每个 <p>元素的末尾.但是当我运行代码时,文本仅被添加到最后一个 <p>元素.也就是说,如果您从上面的链接打开源代码,您将看到有两个<p>元素.但是"它有效!" 文本仅附加到第二个文本.

如何在每个 <p>元素的末尾添加此文本？

Answer 1

它将文本附加到每个文本<p>.但是,当您执行此操作时.fadeIn(),您只会影响附加的最后一个副本.尝试将其更改为

 $("p b").fadeIn();

请注意,此解决方案非常简单,如果您的HTML结构变得复杂,它可能会导致奇怪的效果.你可以用这样的东西更准确一些:

$(document).ready(function() {
    var txtid = 1;
    $("#btn1").click(function(){
        var newtext =  $("<b>It works!</b>").addClass("txt-" + txtid);
        newtext.hide();
        $("p").append(newtext);
        $("p .txt-" + id).fadeIn().removeClass("txt-" + txtid);
        txtid += 1;
    });
});

这会为您插入的每个文本块添加一个类.每个按钮单击的类都不同,但同时插入的所有文本块共享.这样,您可以确保您的.fadeIn()呼叫仅影响您刚刚插入的内容而不影响其他杂散<b>标记.