Jqueryは2つの入力セクションの入力を追加します

こんにちは、次の単純なjqueryスクリプトを使用して入力を追加します。ソースhttp://muiomuio.com/web-design/add-remove-items-with-jquery Jqueryは2つの入力セクションの入力を追加します

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Add and Remove - jQuery tutorial</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
    var i = $('input').size() + 1; 

    $('a.add').click(function() { 
    $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs'); 
     i++; 
    }); 

    $('a.remove').click(function() { 
      if(i > 2) { 
     $('input:last').animate({opacity:"hide"}, "slow").remove(); 
    i--; 
    } 
    }); 

    $('a.reset').click(function() { 
    while(i > 2) { 
     $('input:last').remove(); 
     i--; 
    } 
    }); 
}); 
</script> 
</head> 
<body> 
<h1>Add/remove text fields from webform</h1> 

<a href="#" class="add"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> 
<a href="#" class="remove"><img src="remove.png" width="24" height="24" alt="remove input" /></a> 
<a href="#" class="reset"><img src="reset.png" width="24" height="24" alt="reset" /></a> 

<div id="inputs"> 
<p> 
<input type="text" value="input 1" name="input_field1"> 
</p> 
</div> 
</div> 
</body> 
</html>

私はそう私は

var i = $('input').size() + 1;

が個別になることを達成することができますどのようにこのHTML

<div id="outputs"> 
<p> 
<input type="text" value="output 1" name="output_field1"> 
</p>

を追加する複数の入力フィールドに

を追加したい知っていますすべての入力セクションについて？

EDITED：完全なスクリプトは次のとおりです。コピー＆ペーストは私の完全なクローンを得るでしょう。問題はまだ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Add and Remove - jQuery tutorial</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$(function() { 

    var i = $('input').size() + 1; 

    $('a.add').click(function() { 

     $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs'); 
     i++; 
    }); 

    $('a.remove').click(function() { 

    if(i > 2) { 
     $('input:last').animate({opacity:"hide"}, "slow").remove(); 
     i--; 

    } 

    }); 

    $('a.reset').click(function() { 

    while(i > 2) { 
     $('input:last').remove(); 
     i--; 
    } 

    }); 




     $('a.add_o').click(function() { 

     $('<p><input type="text" value="output ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#outputs'); 
     i++; 
    }); 

    $('a.remove_o').click(function() { 

    if(i > 2) { 
     $('input:last').animate({opacity:"hide"}, "slow").remove(); 
     i--; 

    } 

    }); 

    $('a.reset_o').click(function() { 

    while(i > 2) { 
     $('input:last').remove(); 
     i--; 
    } 

    }); 





}); 

</script> 
<style rel="stylesheet" type="text/css"> 

h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} 

.hide {visibility:hidden;} 

img {border:none;} 

input { 
    width:500px; 
    height:20px; 
    padding:10px; 
    background:#f7f7f7; 
    border:1px solid #f0f0f0; 
    color:#333; 
    font-size:20px; 
    text-align:center; 
    line-height:120px; 
    margin:0; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
} 

#inputs { 
    width:520px; 
    padding:0px 20px; 
    border:1px solid #f0f0f0; 
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    } 

</style> 
</head> 

<body> 

<h1>Add/remove text fields from webform</h1> 

<a href="#" class="add"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a> 
<a href="#" class="remove"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a> 
<a href="#" class="reset"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a> 

<div id="inputs"> 
<p> 
<input type="text" value="input 1" name="input_field1"> 
</p> 
</div> 


<a href="#" class="add_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a> 
<a href="#" class="remove_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a> 
<a href="#" class="reset_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a> 

<div id="outputs"> 
<p> 
<input type="text" value="output 1" name="output_field1"> 
</p> 

</div> 

</body> 

</html>

出典

2011-01-04 Email

「入力セクションごとに個別になる」とはどういう意味ですか？ – Matrym

私は私はあなたが欲しいものをしたと思います。あなたがしなければならなかった唯一のことは、コードをより一貫性のあるものにすることでした。 size()を一度尋ねる代わりに、必要なときに毎回尋ねることができます。これはあなたのiになります。私はこれがあなたの完全なjavascriptになると思う。ご覧のとおり、私は明示的に'#inputs input'質問を追加しました。正しいものを数えます。私は.size()メソッドは実際にカウントメソッドであるため、ちょっと欺かれていると思います。一致するオブジェクトの数を数えます。

$(function() 
{ 
    $('a.add').click(function() 
    { 
     var i = $('#inputs input').size() + 1; 
     var newItem = newTextField('input',i); 
     appendItem(newItem, '#inputs'); 
    }); 

    $('a.remove').click(function() 
    { 
     var i = $('#inputs input').size(); 

     // can't remove the last 
     if(i > 1) 
      removeItem('#inputs input:last'); // be sure that the input is inside your #inputs 
    }); 

    $('a.reset').click(function() 
    { 
     while($('#inputs input').size() > 1) 
     { 
      $('#inputs input:last').remove(); 
     } 
    }); 

    $('a.add_o').click(function() 
    { 
     var i = $('#outputs input').size() + 1; 
     var newItem = newTextField('output',i); 
     appendItem(newItem, '#outputs'); 
    }); 

    $('a.remove_o').click(function() 
    { 
     var i = $('#outputs input').size(); 

     // can't remove the last 
     if(i > 1) 
      removeItem('#outputs input:last'); // be sure that the output is inside your #outputs 

    }); 

    $('a.reset_o').click(function() 
    { 
     while($('#outputs input').size() > 1) 
     { 
      $('#outputs input:last').remove(); 
     } 
    }); 

    /* 
    * @param type: a string of input of output 
    * @param i: the number to add to 
    */ 
    function newTextField(type, i) 
    { 
     return '<p><input type="text" value="' + type + ' ' + i + '" name="input_field"' + i + '" /></p>'; 
    } 

    /* 
    * append the item animated to the $(selector) 
    * @param item: the item:string to append 
    * @param selector: the selector:string to append to 
    */ 
    function appendItem(item, selector) 
    { 
     $(item).animate({ opacity: 'show' }, 'slow').appendTo(selector); 
    } 

    /* 
    * remove an item animated 
    * @param item: the item:string to remove 
    */ 
    function removeItem(item) 
    { 
     $(item).animate({opacity:"hide"}, "slow").remove(); 
    } 
});

出典

2011-01-05 18:49:03 Marnix

が存在する私はあなたが次の操作を行うことができると思います。

$('input').each(function() { 
$(this).size() + 1; 

// ... rest of the code 

});

出典

2011-01-04 18:38:17 Marnix

試してみましたが動作しませんでした。確かに – Email

今、私はあなたが意味するものを参照してください。セレクタにプロパティを追加するだけでは（これはあなたが試しているものです）。これを解決する方法はいくつかあります。私はあなたに答えを出そうとします。これはhtmlに余分な属性を追加します。 – Marnix

私はグローバルに変数を定義します。

すなわち：

<script type="text/javascript"> 
    var i = 0; 
    $(function() { 
     i = $('input').size() + 1; 
     $('a.add').click(function() { 
      $('<p><input type="text" value="input ' + i + '" name="input_field' + i + '" /></p>').animate({ 
       opacity: "show" 
      }, "slow").appendTo('#inputs'); 
      i++; 
     }); 
     $('a.remove').click(function() { 
      if (i > 2) { 
       $('input:last').animate({ 
        opacity: "hide" 
       }, "slow").remove(); 
       i--; 
      } 
     }); 
     $('a.reset').click(function() { 
      while (i > 2) { 
       $('input:last').remove(); 
       i--; 
      } 
     }); 
    }); 
</script>

出典

2011-01-04 18:40:07 Chandu

 $(function() { 
    var i = $('input').size() + 1; 

    $('a.add').click(function() { 
    $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');//first field added 
    $('<p><input type="text" value="output ' + i + '" name="output_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');// Second field added 
     i=i+2;//increment by two fields; 
    }); 

    $('a.remove').click(function() { 
      if(i > 2) { 
     $('input:last').animate({opacity:"hide"}, "slow").remove();//second field removed 
     $('input:last').animate({opacity:"hide"}, "slow").remove();//first field removed 
    i=i-2;//decrement by 2 fields 
    } 
    }); 

    $('a.reset').click(function() { 
    while(i > 2) { 
     $('input:last').remove(); 
     i--; 
    } 
    }); 
});

出典

2011-01-04 18:40:12 FatherStorm

それは数字を2にする代わりに、1の代わりに – Email

となりました。 2つのフィールドを追加したためです。 2を増やしていない場合、「リセット」をクリックすると、すべてのフィールドを削除することはなく、追加されたフィールドの半分だけを削除します...カウンタを1ずつ増やしたい場合は、変更する必要がありますカウンタをi ++とiに戻し、TWO $（ 'input：last'）を配置します。リセット機能で... – FatherStorm

Jqueryは2つの入力セクションの入力を追加します

答えて

関連する問題