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;
                            }

問題は、ループ内のすべての投稿に対して同じテキスト (タイトルとコンテンツ) が表示されることです...助けてください!!!

4

1 に答える 1

0

と言うと$(".lightbox, .lightbox-panel").fadeIn(300);、ページ上のそのクラスを持つすべてのライトボックスを呼び出します。特定のライトボックスを投稿にターゲティングする必要があります。

このようなもの

$("a.show-panel").click(function(){
   $(this).parent().siblings('.lightbox-panel').fadeIn(300);
 })
于 2013-04-25T07:33:08.920 に答える