Jquery를 사용하여 다른 양식의 필드를 동적으로 추가했습니다.

Question

처음에는 표시되지 않는 필드를 원하지만 사용자가 필드에 입력하기로 결정한 경우 양식에 표시됩니다.

내가 다른 모델에 대한 몇 가지 다른 형태로이 분야를 추가하고 싶습니다, jQuery를 사용하지만

$('input[example]') 
    .bind('click', function() { 
     $('#clickfield') 
      .append('<input id="new_field" name="MODEL[new_field]" size="30" type="text">'); 

처럼 뭔가를 할 수 있습니다. 모델 이름이 필드에 있으므로 Jquery 스크립트를 모듈화하여 모든 양식에 동일한 스크립트를 사용할 수있는 방법은 무엇입니까? form 필드 (예제의 경우 '#clickfield')의 선택이 될 것입니다

addInput(form, id, modelName) { 
    $(form).append(
      '<input id="'+id+'" name="'+modelName+'['+id+']" size="30" type="text">' 
      ); 
} 

이 id가의 ID 될 것이다 :

Answer 1

하나의 솔루션은 입력 매개 변수로 원하는 이름으로 함수를 만드는 것입니다 새 입력 필드 및 modelName은 언급 한 모델의 이름이됩니다.

다른 해결책으로, 'input[example]'은 필드를 표시하는 이벤트를 트리거하는 일부 버튼 또는 클릭 가능 영역을 선택합니다. 및 '#clickfield' 일부 div 또는 span 또는 당신이 당신의 필드를 표시합니다 일부 영역이며, 니모닉 클래스와, display:none로 스타일 서버에서 이러한 숨겨진 필드를로드하는 것입니다, 그래서 함수 정의처럼 당신이 뭔가를 할 수 :

showField(clickable, class) { 
    $(clickable).click(
     function(){ 
      $(class).show(); 
     } 
    ); 
} 

을

다음 :

$(document).ready(
    showField('input[example1]', '.class1'); 
    showField('input[example2]', '.class2'); 
    showField('input[example3]', '.class3'); 
    //    . 
    //    . 
    //    . 
    // One line for every clickable area that triggers 
    // the event of showing a field, and the class of the 
    // field to show 
); 

당신이 (대신 show()에) fadeIn() JQuery와 기능의 필드 페이딩과 같은 몇 가지 사용자 친화적 인 기능을 추가 할 수 있습니다 이런 식으로, 또는 표시의 다른 애니메이션.

희망 하시길 바랍니다. 행운을 빕니다!