PHP 생성 요소에 클릭 이벤트 추가

Question

div 테이블을 생성하는 페이지를 만들고 있습니다. 각 행에는 링크가있는 셀이 있습니다. 해당 링크를 클릭하면 현재 행과 다음 행 사이의 숨겨진 div가 토글됩니다.

링크는 id = "clickLink_10"이고 숨겨진 div는 id = "10"이고 class = "hiddenDiv"입니다. 숫자 10은 데이터베이스에있는 게시물의 ID에서 생성 된 동적 숫자입니다.

숫자를 하드 코딩하면 애니메이션이 제대로 작동합니다. 하지만 행을 데이터베이스에서 가져올 것이므로 숨겨진 div 동적으로 링크를 연결하고 싶습니다. 여기

는이 보일 수 있습니다 HTML 방법의 예 (이것은 실제로는 더 복잡하지만, 이것은 핵심 부분입니다) :

<div><a href="#" id="clickLink_11">CLICK HERE</a></div> 
<div class="hiddenDiv" id="11">blabla</div> 

<div><a href="#" id="clickLink_1">CLICK HERE</a></div> 
<div class="hiddenDiv" id="1">blabla</div> 

<div><a href="#" id="clickLink_3">CLICK HERE</a></div> 
<div class="hiddenDiv" id="3">blabla</div> 

그리고 여기에 내가 jQuery를에 할 노력하고있어 무엇 : 아무렴 작동하지 않습니다

hiddenDivs = $('.hiddenDiv'); 

for(var i = 0; i < hiddenDivs.length; i++) { 
    $("#clickLink_" + hiddenDivs[i].id).click(function() { 
     $(hiddenDivs[i]).slideToggle(1000); 
    }); 
} 

내가 그래서이 같은 더미 코드를 보려면 I-변수 잘못을 치료 해요 알고있다. 어떤 도움을 주셔서 감사합니다.

Answer 1

A를 시작 ID를 가진 모든 앵커 태그를 선택 말하고있다 유효한 옵션은 data- 속성을 사용할 수 있습니다. 숫자 만 유효한 HTML ID가 아니므로 숫자 ID도 변경하겠습니다.

HTML

<div><a href="#" class="clickLink" data-hidden-id="11">CLICK HERE</a></div> 
<div class="hiddenDiv" id="hidden_11"> 

<div><a href="#" class="clickLink" data-hidden-id="1">CLICK HERE</a></div> 
<div class="hiddenDiv" id="hidden_1"> 

<div><a href="#" class="clickLink" data-hidden-id="3">CLICK HERE</a></div> 
<div class="hiddenDiv" id="hidden_3"> 

JS

$(".clickLink").click(function() { 
    var hiddenDivId = "hidden_" + $(this).data("hidden-id"); 
    $("#" + hiddenDivId).slideToggle(1000); 
}); 

Answer 2

특성 선택기와 함께 ^= 연산자를 사용하여 요소를 선택할 수 있습니다. 뭔가 "로 시작"하는 ^= 운영자는 그래서, 속성을 찾아 그것을 알려줍니다

$("a[id^=comment_]").click(function(e){ 
    e.preventDefault(); 
    var hideId = $(this).attr("id").replace("comment_",""); 
    $("#"+hideId).slideToggle(1000); 
}); 

그래서 선택기 a[id^=comment_]은 기본적으로 comment_