JQuery를 사용하여 많은 버튼에 클릭 기능을 할당하려면 어떻게해야합니까?

Question

29 버튼이 있습니다 : todayResultsbutton0 .. todayResultsbutton28,
및 29 divs : todayResultsUrls0 .. todayResultsUrls28.
나는 주어진 div를 숨기거나 표시하는 toggleVisibility (divName) 함수도 가지고있다. 내가 다음 코드를 사용하는 것을 시도하고있다 :

for (var i=0; i < 29; ++i) { 
    var b = "#todayResultsbutton"+i; 
    var d = "todayResultsUrls"+i; 
    $(b).click(function(){toggleVisibility(d);}); 
} 

난이 /가 일치 DIV하지만 실제 결과를 숨길 보여 각 버튼 클릭을 일으킬 것이라고 생각하는 것은 어떤 버튼을 클릭 (0 .. 28) 쇼가 마지막 div - todayResultsUrls28을 숨 깁니다.

누군가 내가 틀렸다고 말할 수 있습니까?
감사합니다.

Answer 1

클래스를 사용하십시오.

$(".myClass").click(function() { 
    var d = $(this).attr("id").replace("button", "Urls"); 
    toggleVisibility(d); 
}); 

Answer 2

사용

VAR의 D = "#todayResultsUrls"를 I +;

대신

VAR의 D = "todayResultsUrls"I +;

Answer 3

"startsWith"속성 선택기를 ID와 함께 사용하여 클릭 한 항목의 ID에서 URL을 작성할 수 있습니다.

$('[id^=todayResultsbutton]').click(function() { 
    var url = this.id.replace(/button/,'Urls'); 
    toggleVisibility(url); 
}); 

Answer 4

대신 루프를 사용하려고, 당신은

당신이 뭔가를 가지고 있다고 ... "찾기"귀하의 div의 셀렉터를 사용하여 더 나을 것 :

<table> 
<tr><td> 
<input type="button" id="myButton" value="test" text="test" /> 
</td><td><div id="myDiv"></div></td></tr></table> 

당신 오히려 event target를 USINT 펑션와 관계있는 div의를 찾아

$('#myButton').parent().find('#myDiv').hide(); 

Answer 5

전환 가시성 :에 의해 myDiv을 찾을 수 있습니다

<div id='todayResultsUrls1'> 
    <button id='todayResultsbutton'></button> 
</div> 

를 버튼 요소를 얻을 숨길 DIV를 찾을 수 있습니다을 대상으로 이벤트를 사용 : 가정 등 수업

보다.

var parentDiv = $(e.target).parent(); 
toggleVisibility(parentDiv); 

Answer 6

이를 사용할 수 있습니다

$('button[id^="todayResultsbutton"]').click(function() { 
    var index = this.id.substring(18,this.id.length); 
    toggleVisibility("todayResultsUrls"+index); 
}); 

이 아이디의이 todayResultsbutton로 시작하는 모든 <button> 태그를 찾을 수 있습니다. 그런 다음 클릭 한 태그의 ID를 가져오고 todayResultsbutton 부분을 제거하여 ID를 얻은 다음 toggleVisibilty() 함수를 호출하십시오.

예 here.

편집
참고 :이 만을 확인 모든 버튼 태그를 얻을 수있는 기본 getElementsByTagName 기능을 사용할 수 있기 때문에

선택 ( [id^="todayResultsbutton"])와 함께 시작되기 전에 button를 사용

• 이의 jQuery 셀렉터를 속도 특정 ID.
• this.id이 더 빠르며 (this을 감싸거나 추가 기능 attr()을 호출 할 필요가 없으므로) 크로스 브라우저 문제가 발생하지 않아 jQuery의 $(this).attr('id') 대신 사용됩니다.