동일한 클래스의 여러 형제가있는 키 업에서 개별적으로 동적으로 텍스트 입력 크기 조정

Question

어떤 도움을 주시면 감사하겠습니다. 동적으로 생성 된 텍스트 입력의 크기를 키잉에 맞게 조정하려고합니다. 이 작업을 기본 레벨에서 수행하도록 할 수는 있지만 클래스가 같은 개별 입력의 크기를 조정하는 데 문제가 있습니다. 즉, 하나의 개별 입력 필드 크기 조정 대신 ".question"클래스의 모든 텍스트 입력 크기가 조정됩니다.

여기 내 코드입니다 :

function resizeInput(theInputField) { 
    var getInputWidth = $(theInputField).width(); 
    if(getInputWidth < 400){ 
    $(theInputField).attr('size', $(theInputField).val().length); 
    } 
} 

$('#question-list').on('keyup', '.question', function(){ 
    resizeInput('.question'); 
}); 

$ ('# 질문 목록') -> 이것은 UL 요소입니다.

$ ('. question') -> 이것은 위의 ul에서 동적으로 생성 된 입력 [type = "text"]입니다.

Answer 1

이벤트 핸들러에서 this은 이벤트를 트리거 한 요소입니다. 당신은 다음과 같이 할 수 있습니다 :

function resizeInput($theInputField) {  
    var inputWidth = $theInputField.width(); 
    if(inputWidth < 400){ 
    $theInputField.attr('size', $theInputField.val().length); 
    } 
} 

$('#question-list').on('keyup', '.question', function(){ 
    resizeInput($(this)); 
});