변경된 입력의 속성을 얻는 방법?

Question

.on("change")을 사용하여 변경 이벤트를 처리하려는 여러 입력이 있습니다.

var input1 = $("input[name=input1]"); 
var input2 = $("input[name=input2]"); 
var input3 = $("input[name=input3]"); 

각 입력 I가 원하는 데이터 속성을 가지고

$(document).on("change keyup", [ 
    input1, 
    input2, 
    input3 
], function() { 
    // doing stuff 
}); 

각 변수는 다음과 같이 할당 JQuery와 셀렉터를 갖는다 : 그와 같은 변수의 배열에 입력을 추가했는지 입력이 변경되면 this 컨텍스트에서 가져옵니다. 입력 1이 변경된 경우 예를 들어, 나는 그것의 데이터는 다음과 같은 방법으로 속성을 얻으려면 :

this.data("someAttribute") 

을하지만 this이 .on() 함수에서하지만 초기 $(document) 선택 및 I와 선택기 작동하지 않는 것을 두려워 실제로 어떤 변경되지 않은 입력 대신에 document에서 데이터 속성을 얻으려고합니다.

참고 :이 경우 $(input1, input2, input3)과 같이 여러 입력을 선택하는 것이 제 경우에는 작동하지 않습니다.

Answer 1

배열에 바인딩해야하는 입력을 그룹화하고 배열을 .on() 방법으로 전달하는 것 (허용되지 않음)은 공통적 인 CSS 클래스 인 input 요소에 공통된 CSS 클래스를 부여한 다음 이벤트 바인딩을 작성해야합니다 같은 :

$(document).on("change keyup", ".theClass", function() { 
    // doing stuff 
}); 

그런 다음, 이벤트 핸들러 내에서이 같은 JQuery와 기능에 this을 통과해야합니다 : $(this).data().data() 때문에이 JQuery와 방법 및 기본 DOM 요소에 사용할 수 없습니다 그 this 만 참조하십시오.

$(document).on("change keyup", ".input", function() { 
 
    console.log($(this).data("test")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' name='input1' class="input" data-test='one'> 
 
<input type='text' name='input2' class="input" data-test='two'> 
 
<input type='text' name='input3' class="input" data-test='three'>

Answer 2

것은, 모든 입력을 두 번째 속성은 문자열 선택을해야 CSS 클래스

$('.change').on('change keyup', function() { 
 
     console.log($(this).val()); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="change"> 
 
<input type="text" class="change"> 
 
<input type="text" class="change">