Question

我写过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;
                            }

现在问题是它为循环中的所有帖子显示相同的文本（标题和内容）...请帮助我!!!

Answer 1

当您说$(".lightbox, .lightbox-panel").fadeIn(300);时，它会在页面上调用该类的所有灯箱。您需要将特定灯箱定位到帖子。

像这样的东西

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

如何在灯箱中显示多个文本

1 个答案: