jquery를 사용하여 어린이 표시 전환

Question

"앨범 1"링크를 클릭하면 사진을 숨기고 표시하는 것을 토글하고 싶습니다. 그러나 지금은 아무 것도하지 않습니다. 콘솔에서 디버깅을 시도했지만 유용하지 않은 내용이 출력되지 않습니다.

script.js

$(document).ready(function() { 
    // album click toggle 
    $('.album a').click(function() { 
     console.log($(this).parent().find(".photos")); 
     $(this).parent().find(".photo").hide(); 
    }); 
}); 

---

된 index.html은

<div class="album"> 
      <h2><a href="#">Album 1</a></h2> 
      <ul class="photos"> 
       <li> 
        <img src="img/img1.jpg"> 
        <span class="info"><span>Image 1</span></span> 
       </li> 
       <li> 
        <img src="img/img2.jpg"> 
        <span class="info"><span>Image 2</span></span> 
       </li> 
       <li> 
        <img src="img/img3.jpg"> 
        <span class="info"><span>Image 3</span></span> 
       </li> 
      </ul> 
     </div> 

Answer 1

당신의 $ (이) .parent()

을 H2를 참조하고 '.photos'아니다 '.photo'

$(document).ready(function() { 
     // album click toggle 
     $('.album a').click(function() { 
      console.log($(this).parent().parent().find(".photos")); 
      $(this).parent().parent().find(".photos").hide(); 
     }); 
    }); 

또는

$(document).ready(function() { 
      // album click toggle 
      $('.album a').click(function() { 
       console.log($(this).parents().find(".photos")); 
       $(this).parents().find(".photos").hide(); 
      }); 
     }); 

Answer 2

대신 .photos의 .photo을 목표로하고 있습니다. 그 옆에

그럴 수 실제로 전환 같은 : (". 사진") '및 실제 올바른 클래스`.find .find`사이에 큰 차이가있다

jQuery(function($) { 
 

 
    // album click toggle 
 
    $('.album a').click(function(e) { 
 
    e.preventDefault(); // Prevent browser scroll to top 
 
    $(this).closest(".album").find(".photos").stop().slideToggle(); 
 
    }); 
 
    
 
    
 
});

*{margin:0; box-sizing:border-box;} 
 

 
.album ul {display:none; list-style:none; padding:0; margin:0; overflow:auto;} 
 
.album li {display:inline-block; vertical-align:top;} 
 
.album li>*{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="album"> 
 
    <h2><a href="#">Album 1</a></h2> 
 
    <ul class="photos"> 
 
    <li> 
 
     <img src="//placehold.it/64x50"> 
 
     <span class="info"><span>Image 1</span></span> 
 
    </li> 
 
    <li> 
 
     <img src="//placehold.it/64x50"> 
 
     <span class="info"><span>Image 2</span></span> 
 
    </li> 
 
    <li> 
 
     <img src="//placehold.it/64x50"> 
 
     <span class="info"><span>Image 3</span></span> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="album"> 
 
    <h2><a href="#">Album 2</a></h2> 
 
    <ul class="photos"> 
 
    <li> 
 
     <img src="//placehold.it/64x50"> 
 
     <span class="info"><span>Image 1</span></span> 
 
    </li> 
 
    <li> 
 
     <img src="//placehold.it/64x50"> 
 
     <span class="info"><span>Image 2</span></span> 
 
    </li> 
 
    <li> 
 
     <img src="//placehold.it/64x50"> 
 
     <span class="info"><span>Image 3</span></span> 
 
    </li> 
 
    </ul> 
 
</div>