jquery - JQuery クリックして継続的に新しい要素を追加する

Question

<p>jqueryを使用してボタンをクリックすると要素が表示されるコードがあります。ボタンを 2 回押すと、別の<p>要素が表示されます。現在、それは発生しません (<p>一度だけ表示されます)。

Jクエリ:

$(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

jQueryappendメソッドを使用して、p タグを div または body に追加します。HTML:

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

jQuery:

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

score 1 · Accepted Answer

pクラスの非表示が複数ある場合は、input次を試すことができます。

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

score 0 · Accepted Answer

新しい要素を作成するのではなく、非表示の要素を表示しています。代わりにこれを使用してください：

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

4 に答える 4