jquery - jQuery点击不断添加新元素

Question

我有一些代码可以<p>在使用 jquery 单击按钮时显示元素。如果按钮被按下两次，我希望<p>出现另一个元素。现在这不会发生（<p>只出现一次）。

查询：

$(document).ready(function(){

    $("#add").click(function() {
        $(".input").css("display","block");
    });
});

HTML：

<p class='input' style='display: none;'>
    text here
</p>

<input type='button' value='Add class' id='add'>

score 2 · Accepted Answer

动态创建<p>元素。就像是：

$('#add').before($('<p>').addClass('input').text('text here'));

或者，如果你有一个比这更复杂的模板，你可能想要克隆元素：

var lastItem = $('.input').eq(-1);
lastItem.after(lastItem.clone());

score 1 · Accepted Answer

如果你有多个隐藏p的类，input你可以尝试：

$("#add").click(function() {
    $(".input:hidden:first").show()
});

score 1 · Accepted Answer

使用 jQueryappend方法将 p 标签添加到 div 或 body。HTML：

<div id="pTags"></div>

jQuery：

$("#add").click(function(){
    $("#pTags").append('<p>text</p>');
});

score 0 · Accepted Answer

您正在显示一个隐藏元素，而不是创建一个新元素。改用这个：

$("#add").click(function() {
    $("<p class='input'></p>").appendTo("body");
});

4 回答 4