무한 루프를 만드는 동적 값을 기반으로하는 복제 요소

Question

슬라이드 할 때 숫자 값을 제공하는 슬라이더 입력 필드가 있습니다. 슬라이더 값을 기준으로 객체를 X 번 복제하고 싶습니다.하지만이 작업을 수행하려고하면 무한 루프가 발생합니다. 슬라이더 값이 변경 될 때 복제 된 요소의 수를 얻는 방법이 있습니까? 여기 내가 사용했던 코드가있다.

jQuery(document).ready(function($) { 
$(window).load(function() { 

$('input#fieldname3_1').change(function() { 

var e = $('#student-icons.icon > span'); 
var n = $('#fieldname9_1').val(); 

$('#student-icons.icon').html(
    for (var i = 0; i < n; i++) { 
     e.clone().insertAfter(e); 
}); 
}).change() 
}); 
}); 

Answer 1

다음 설치하십시오 :

HTML :

<input type="range" id='fieldname3_1' style='width: 200px'> 

<div id='student-icons' class='icon'></div> 

자바 스크립트 :

$(document).ready(function($) { 
     $('input#fieldname3_1').change(function() { 
      var n = $(this).val(); 

      // reset the element 
      $('#student-icons.icon').html(''); 
      for (var i = 0; i < n; i++) { 
       // The html of what you want to clone goes here 
       $('#student-icons.icon').append("<div id='hello'>"+i+"</div>") 
      } 
     }); 
}); 

나는 또한 (브라우저 지원이 문제가되지 않을 경우 oninput 이벤트를 사용하는 것이 좋습니다 IE를 9 세 이상 만 해당) :

$(document).ready(function($) { 
     $('input#fieldname3_1')[0].oninput = function() { 
      var n = $(this).val(); 

      $('#student-icons.icon').html(''); 
      for (var i = 0; i < n; i++) { 
       $('#student-icons.icon').append("<div id='hello'>"+i+"</div>") 
      } 
     }; 
}); 

이렇게하면 keydown을 기다리는 대신 입력이 변경되는 즉시 이벤트가 시작됩니다.

JsFiddle
JsFiddle w/ onInput