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

Question

我是 JavaScript 新手。完整代码是here (无法在问题正文中输入 jQuery)。

以下是JS部分代码

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

我打算做的是，当用户单击按钮(“#btn1”)时，一段新的文本(“它有效!”)应该出现在每个 <p> HTML 的元素。但是当我运行代码时，文本仅附加到<​​strong>最后 <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;
    });
});

这会为您插入的每个文本 block 添加一个类。每次单击按钮时，该类都会有所不同，但由同时插入的所有文本 block 共享。这样，您就可以确保您的 .fadeIn()调用仅影响您刚刚插入的内容，而不影响其他杂散<b>标签。