1

単一のテキストフィールドとそれに付随する「追加」ボタンがあります。

<fieldset id="itemList">
    <input type="text" id="addItem" name="addItem">
    <input type="button" name="add" value="add">
</fieldset>

誰かが「追加」をクリックするたびに、新しいアイテムを下のリストに追加して、上の入力フィールドをクリアしたいと思います。

<hr>
<ol id="resultList">
    <li>just example</li>
    <li>new text input</li>
    <li>last entered item</li>
</ol>

jQueryでこれを実現する方法がわかりません。手伝ってくれますか？

ボーナスとして、リストを10に制限したいので、どういうわけかリストアイテムの数を数え、上記のフォームの表示を11未満のリストアイテムに依存させる必要があります。

手伝ってくれますか？

4

3 に答える 3

1 
jQuery(function($){
    $('input[name="add"]').click(function() {
        if($('#resultList li').length < 10)
        {    value = $('input[name="addItem"]').val();
             $('ol li:last').after("<li>" + value + "</li>");
             $('input[name="addItem"]').val(""); }
        if($('#resultList li').length == 10)
        {   $('input[name="addItem"]').css("display", "none");
            $('input[name="add"]').css("display", "none"); }
    });
});

ここでjsFiddleを動作させる：http：//jsfiddle.net/bhZdz/2/

質問の最後の部分が表示されなかったため編集しました。10番目の要素が追加された後、フォームが非表示になります。

于 2012-08-08T21:33:39.743 に答える
1

これを試して

 ​$('input[type=button]').click(function(){
    $('#resultList').append('<li>'+$('#addItem').val()+'</li>');
    $('#addItem').val("");
  }
 );​​​​​​​​​​​​​​​​​​​​​​​​​​

使用することもできますinput[name=add]

于 2012-08-08T21:34:40.337 に答える
1 
function addItem(){
  var list = $("#resultList");
  var count = list.find("li").size();
  if(count < 10){
     var input = $("input[name=addItem]");
     var item = input.val();
     list.append(("<li>"+item+"</li>"));
     input.val(" "); // clear field
  }else{
    // already have 10 items
  }
}
$("input[name=add]").click(addItem);
于 2012-08-08T21:09:05.107 に答える