Question

在这里，我展示了不同内容的不同图像。我使用模态弹出窗口来显示更多内容。在模态弹出窗口外显示的图像是正确的，但是当我选择阅读更多模态弹出窗口时，我得到的图像与所有模态弹出窗口中的第一个图像相同。我的代码如下：

 <div class="row">
                                <?php 
                                        if( have_rows('blog_sub_content') ): 
                                        $i=0;
                                        while( have_rows('blog_sub_content') ): the_row(); 

                                        $blg_image          = get_sub_field('blg_image');
                                        $blg_title          = get_sub_field('blg_title');
                                        $blg_posted_name    = get_sub_field('blg_posted_name');
                                        $blg_content        = get_sub_field('blg_content');


                                        ?>
                                    <div class="col-sm-4">
                                        <div class="single-blog">
                                            <img src="<?php echo $blg_image['url'] ; ?>" alt="" />
                                            <h2><?php echo $blg_title; ?></h2>
                                            <ul class="post-meta">
                                                <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> <?php echo $blg_posted_name; ?></li>
                                                <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
                                            </ul>
                                            <div class="blog-content">
                                                <?php echo substr(strip_tags($blg_content), 0, 144);  ?>
                                            </div>
                                            <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail">Read More</a>
                                        </div>

<div class="modal fade" id="blog-detail" tabindex="-1" role="dialog" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-body">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <img src="<?php echo $blg_image['url']; ?>" alt="" />
                                                        <h2><?php echo $blg_title; ?></h2>
                                                        <?php echo $blg_content; ?>
                                                    </div> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php

                                    if($i==2)
                                    { ?>
                                    <div class="clearfix"></div>
                                    <?php }
                                    $i++;
                                        endwhile;  
                                        endif; 

                                        ?>

                                    </div> 
                                </div>

Answer 1

我得到了答案：

我必须使用$i用于不同的id来像这样调用它：

<a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail_<?php echo $i;?>">Read More</a>

然后，

<div class="modal fade" id="blog-detail_<?php echo $i;?>" tabindex="-1" role="dialog" aria-hidden="true">

完整代码：

<div class="col-sm-4">
                                    <div class="single-blog">
                                        <img src="<?php echo $blg_image['url'] ; ?>" alt="" />
                                        <h2><?php echo $blg_title; ?></h2>
                                        <ul class="post-meta">
                                            <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> <?php echo $blg_posted_name; ?></li>
                                            <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
                                        </ul>
                                        <div class="blog-content">
                                            <?php echo substr(($blg_content), 0, 147);  ?>
                                        </div>
                                        <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail_<?php echo $i;?>">Read More</a>
                                    </div>
                                    <div class="modal fade" id="blog-detail_<?php echo $i;?>" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                    <img src="<?php echo $blg_image['url']; ?>" alt="" />
                                                    <h2><?php echo $blg_title; ?></h2>
                                                    <?php echo $blg_content; ?>
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                </div>

根据模态弹出窗口没有获取图像

1 个答案: