2 개의 다른 입력 섹션에 대한 Jquery 추가 입력

안녕하세요 저는 다음 간단한 jquery 스크립트를 사용하여 입력을 추가합니다. 자료 http://muiomuio.com/web-design/add-remove-items-with-jquery 2 개의 다른 입력 섹션에 대한 Jquery 추가 입력

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

를 추가 모든 입력 섹션에 대해?

편집 : 전체 스크립트는 다음과 같습니다. 복사하여 붙여 넣으면 내 전체 복제본을 얻을 수 있습니다. 문제는 여전히

<!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입니다. 나는 이것이 당신의 전체 자바 스크립트라고 생각한다. 보시다시피, 나는 정확하게 '#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

이 전 세계적으로 당신의 i 변수를 정의합니다.

즉이 :

<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. thx – Email

. 2 개의 필드를 추가했기 때문입니다. 2로 증가하지 않으면 "재설정"을 클릭하면 모든 필드를 제거하지 않고 추가 된 필드의 절반 만 제거합니다 ... 카운터를 1 씩 증가 시키려면 변경해야합니다. 카운터는 i ++ 및 i--로 돌아가서 두 $ ('입력 : 마지막')을 추가합니다. remove(); 리셋 기능에서 ... – FatherStorm

2 개의 다른 입력 섹션에 대한 Jquery 추가 입력

답변

관련 문제