Jquery 표시/숨기기 토글 다음

Question

페이지에 여러 제품이 있으며 데이터베이스를 통해 모두 가져옵니다. 각 아래에는 댓글 버튼을 클릭하여 표시하고 숨기려는 댓글 상자가 있습니다.

내 자바 스크립트 :

$(document).ready(function(){ 

    $("#product-box div#product-comment-box").hide(); 
    //$("#product-box div.comment").show(); 

$("#product-box div.comment").click(function(){ 
    $("li div#product-comment-box").toggle(); 
}); 

내 제품 영역의 HTML :

<li><div id="product-box"> 
    <div id="product-image"><a href="#"><img src="images/image_2.jpg"></a></div> 
    <div id="product-controls"> 
     <a href="#"><div id="button" class="more"><p>More</p></div></a> 
     <a href="#"><div id="button" class="add"><p>Add</p></div></a> 
     <div id="button" class="comment"><p>Comment</p></div> 
     <a href="#"><div id="button" class="like"><p>Like</p></div></a> 
    </div> 
    <p>Product Name</p> 
    <div id="product-comment-box">Comment</div> 
    </div></li> 

그러나 이것은 내가이 최선의 분리 어떻게 모든 제품 모든 코멘트 상자를 전환하는 관리입니다 ? next와 nextAll을 사용해 보았지만 운이 없었습니다.

감사

Answer 1

당신은 현재의 주석을 참조 할 this를 사용해야합니다. 선택기가 수행중인 작업을 기억하고 일치하는 DOM의 모든 것을 가져옵니다.

$("#product-box div.comment").click(function(){ 
    $(this).closest('li').find('div#product-comment-box').toggle(); 
}); 

id로 선택하는 것은 좋은 생각처럼 보이지 않지만. div를 클래스에 제공하고 대신 클래스를 선택하십시오.

//Change 
<div id="product-comment-box">Comment</div> 

//To 
<div class="product-comment-box">Comment</div> 

//then select using class instead. 
$("#product-box div.comment").click(function(){ 
    $(this).closest('li').find('div.product-comment-box').toggle(); 
}); 

Answer 2

당신은 또한 그래서 당신은 같은 JQuery와 그것을 분리해서 할 수있는

   <div id="comment<?php echo "Your db id" ?>" class="show_to_public"> 

       </div> 
       <div id="product-comment-box<?php echo "Your db id" ?>"> 

       </div> 

처럼 divId는의 ID를 전달 ...이 방법을 시도 할 수 있습니다 .. 내

 $('.show_to_public').click(function(e){ 
     var id=$(this).attr("id").replace("comment",""); 
     $('#product-comment-box'+id).toggle(); 
     }); 

Answer 3

클릭 처리기 인 경우 this 키워드는 클릭 한 요소를 나타냅니다. docs 가입일

: 위와 같이

핸들러 파라미터는 콜백 함수 걸린다. 핸들러 내에서 this 키워드는 핸들러가 바인드 된 DOM 요소를 나타냅니다. jQuery에서 요소를 사용하려면 일반 $() 함수로 전달하면됩니다. 예 :

찾고있는 요소를 찾으려면 해당 요소를 사용해야합니다. 귀하의 예에서는 다음과 같이 작동합니다.

$(this).closest('li').find('.product-comment-box') 

... 거의. 주의 ID 대신 'product-comment-box'라는 클래스를 사용했습니다. 이는 ID가 고유 요소에 대한 것이므로 둘 이상의 요소에서 결코 사용되어서는 안됩니다. 따라서 모든 중복 ID를 클래스로 대체하려고 할 것입니다. 'id'를 'class'로 바꾸는 것은 이미 클래스가 있으므로 버튼을 제외하고 사용한 스 니펫에서 작동해야합니다. 그 경우 클래스를 공백으로 구분하면됩니다.

<div class="button like">...