>

남자는 초보자 일 뿐이고 내가 가진 질문에서 어떻게해야할지 잘 모르겠습니다. 모든 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"이 인쇄되도록 어떻게 조정할 수 있습니까?

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

감사합니다

  • 답변 # 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>
    
    

관련 자료

  • 이전 장고 내에서 부트 스트랩 nav-item 활성 클래스 변경 (드롭 다운)
  • 다음 reactjs - iOS WKWebView에서 반응 페이지가 404를 반환 함