홈>2020-03-18 18:16

javascript - 루프에서 다른 변수 값을 이벤트 핸들러로 전달

남자는 초보자 일 뿐이고 내가 가진 질문에서 어떻게해야할지 잘 모르겠습니다. 모든 HTML입력의 스타일을 바꾸는 작은 연결 작업을하고 있습니다. 내가 가진 문제는 어떤<\ select>에 관계없이 마지막<\ select>반응 만 클릭하는지 (드롭 다운 메뉴 표시)여러 페이지의 페이지 당 드롭 다운인스턴스에 관한 것입니다.

$(function () { // Document ready 
    test(document.getElementsByClassName("js_select"));
});

function test(selects) {
    var i = 0
    var l = selects.length;
    for (i; i < l; i++) {
        var thisSelect = selects[i];
        var xVariable = i * 10;
        $(thisSelect).click(function () {
            onDivClick.apply(this, [xVariable]);
        });
    }
    function onDivClick(variable) {
        console.log(variable);
    }
}

여기서, 나는 코드를 복제하고 무슨 일이 일어나고 있는지 보여주는 작은 예제를 만들었습니다. 루프를 반복 할 때마다"xVariable"의 값이 변경되고 모든 "선택"에 대한 클릭 이벤트가"xVariable"의 마지막 값만 선택한다는 것을 이해합니다.

첫 번째를 클릭하면 콘솔에서 "0"이 표시되고 다음 선택에서 "10"이 인쇄되도록 어떻게 조정할 수 있습니까?

객체 표기법없이이 문제를 해결할 수있는 방법이 있습니까?

감사합니다

javascriptjqueryonclickclickapply

답변 # 1

each 를 사용하여 선택을 반복 할 수 있습니다. 그리고 단지 바인딩 click 다음과 같은 이벤트 :

(function () {
	$(".js_select").each(function(idx) {
  	$(this).on("click", function() {
    	console.log(idx * 10);
    });
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="" class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select name="" id="" class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select name="" id="" class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>

모든 기능이 어떻게 작동하는지 쉽게 이해할 수 있도록 샘플 목록을 추가했습니다.

답변 # 2

나쁜 못생긴 jQuery없이

// You could also use querySelectorAll
let selects = document.getElementsByClassName('js_select');
// Make sure there are selects
if(selects) {
  for(let i = 0; i < selects.length; i++) {
    let select = selects[i];
    
    select.addEventListener('click', function() {
      console.log(i * 10);
    });
  }
}

<select class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>

Python2.net

javascript - 루프에서 다른 변수 값을 이벤트 핸들러로 전달

관련 자료