여러 DOM 개체에 대한 jQuery 단일 이벤트

Question

DOM의 여러 개체에 대해 변경 이벤트 트리거를 만들려고합니다. 내가 너를 보여 주겠다. 이 코드를

$(document).ready(function() { 
    $(".select_something").change(function() { 
     if (!($(".select_something option[value='0']").attr("selected"))) { 
      $(".write_something").css('display',''); 
     } 
     else 
     { 
      $(".write_something").css('display','none'); 
     } 
    }); 
}); 

이 그리고이와 나는 .select_something라고 모두 여러 선택기/드롭 다운을 가지고있다. 옵션이 기본값 인 0이 아닌이 아닌 경우 <textarea></textarea>이 나타나야하며, 모두 다시 .write_something입니다.

전혀 간단한 기능입니다.

내가 겪고있는 문제는 처음에는 .select_something, .write_something 쌍에만 영향을주고 나머지는 영향을받지 않는다는 것입니다.

.find(), .parent() 및 .children()으로 섞어 보려고했는데 그렇지 않을 수 있습니다.

내 .select_something, .write_something 쌍 모두가 트리거 될 때 어떻게 변경합니까?

편집 : ID는 물론 클래스라고 생각했습니다.

Answer 1

#select_something 

입니다. ID 은 전체 페이지에서이어야합니다. 이 동일한 ID를 가진 요소가 여러 개있는 경우에는 근본적으로 잘못되었습니다 (큰 문제가 발생할 것입니다).

그런 말로하면 수정이 쉽습니다. 이러한 ID를 CSS 클래스로 변경하십시오.

<select id="select_something"> 

는

<select class="select_something"> 

는 그런 다음 CSS 클래스에 대해 선택할 수 지지만, 물론 당신이 선택해야합니다 : 현재의 선택에 write_something 요소 상대를. 이 같은 것은 사용자의 구조에 따라 작동 할 수 있습니다.

$(".select_something").change(function() { 
    if (!($("option[value='0']", this).attr("selected"))) { 
     $(this).siblings(".write_something").css('display',''); 
    } 
    else 
    { 
     $(this).siblings(".write_something").css('display','none'); 
    } 
}); 

Answer 2

공통 ID가 아닌 여러 개체에 대해 공통 클래스를 사용해야합니다.

ID 속성은 단일 항목을 식별하는 데 사용됩니다. CLASS 속성은 항목이 동일한 클래스 이름을 가진 항목 그룹의 일부임을 정의하는 데 사용됩니다.

그들 모두에 클래스 이름 selectObject를 사용하고 .. 여기

$(document).ready(function() { 
    $(".selectObject").change(function() { 

     //inside of an event, $(this) refers to the object that triggers the event, 
     //in this case, the item that was clicked. 

     if (!($(this).val()==0)) { 
      ... 
     } 
     else 
     { 
      ... 
     } 
    }); 
}); 

는 그림 무언가이다. http://jsfiddle.net/FxLSR/1/

Answer 3

다른 답변 및 의견에서 언급했듯이 고유 요소에만 ID를 사용하고 여러 요소에 대해 클래스를 사용하십시오.

이

은 어떻게 설정 내 코드를 것 :

HTML :

<div> 
    <select class="select_something"> ... </select> 
    <textarea class="write_something"> ...</textarea> 
</div> 
<div> 
    <select class="select_something"> ... </select> 
    <textarea class="write_something"> ...</textarea> 
</div> 

etc... 

자바 스크립트 :

$(document).ready(function() { 
    $(".select_something").change(function() { 
     if (!($(this).val() == "0") { 
      $(this).next().show(); 
     } 
     else 
     { 
      $(this).next().hide(); 
     } 
    }); 
}); 

요소가에서 서로 옆에 배치 할 수없는 경우 예를 들어 HTML 코드 예를 들어, 모든 텍스트 영역을 선택하지 않도록 일종의 상대 선택기를 사용하여 텍스트 영역을 선택했는지 확인하십시오. 예를 들어, 두 형제가 형제이지만 서로 옆에 있지 않은 경우 다음을 사용하십시오. $ (this.) .siblings (". write_something")