切換顯示使用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

你瞄準.photo代替.photos。

除此之外，你居然可以切換，如：

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>