2013-04-25 80 views
0

多個文字我已經寫HTML部分如何顯示在收藏夾

<ul class="all-products"> 
    <?php while (have_posts()) :the_post(); ?> 
     <li class="single-product"> 
     <div class="outer-block"> 
     <div class="inner-block"> 
     <div class="product-image"> 
     <?php echo the_post_thumbnail('products-size'); ?> 
     </div> 
     </div> 
     </div> 
     <p class="title-product"> 
     <?php the_title();?> 
     </p> 
     <div class="product-content"> 
     <?php the_content(); ?> 
     <a class="show-panel" href="#">more</a> 
     </div> 
     <div class="lightbox-panel"> 
     <h3> <?php the_title();?></h3> 
     <p><?php the_content(); ?> </p> 
     <p align="center"> 
       <a class="close-panel" href="#">Close this window</a> 
      </p> 
     </div> 
      <div class="lightbox"></div> 
    </li> 
    <?php endwhile; ?> 
    </ul> 

jQuery中作爲

<script type="text/javascript"> 
var $=jQuery.noConflict(); 
     $(document).ready(function(){ 
      $("a.show-panel").click(function(){ 
       $(".lightbox, .lightbox-panel").fadeIn(300); 
      }) 
      $("a.close-panel").click(function(){ 
       $(".lightbox, .lightbox-panel").fadeOut(300); 
      }) 
     }) 
    </script> 

在CSS作爲

.lightbox{ 
      display:none; 
      background:#000000; 
      opacity:0.9; 
      filter:alpha(opacity=90); 
      position:absolute; 
      top:0px; 
      left:0px; 
      min-width:100%; 
      min-height:100%; 
      z-index:1000; 
     } 
     .lightbox-panel{ 
      display:none; 
      position:fixed; 
      top:100px; 
      left:50%; 
      margin-left:-200px; 
      width:400px; 
      background:#FFFFFF; 
      padding:10px 15px 10px 15px; 
      border:2px solid #CCCCCC; 
      z-index:1001; 
          } 

現在的問題是,它顯示相同文字(標題和內容)在循環中的所有帖子...請幫助我!

回答

0

當你說$(".lightbox, .lightbox-panel").fadeIn(300);,它會調用頁面上該類的所有燈箱。您需要將特定的燈箱定位到該帖子。

像這樣的事情

$("a.show-panel").click(function(){ 
    $(this).parent().siblings('.lightbox-panel').fadeIn(300); 
})