Question

我正在使用WordPress插件高级自定义字段和引导程序3。

使用高级自定义字段中继器left_side_-_team，我将显示董事会成员的姓名（$team_board_member_name，标题（$team_board_member_title）和小图片（$team_board_member_image_small）。这显示了董事会成员及其详细信息的列表。然后，我希望用户能够单击特定的小图像，并使用modal /弹出窗口来显示该特定董事会成员的详细信息，而不是始终显示第一位董事会成员的详细信息，而不管哪个小图像具有被点击。

我知道我需要遍历php的模式/弹出窗口，并将其以某种方式绑定到单击的特定小图像上，以在模式中显示正确的董事会成员的详细信息。而不是总是在模式/弹出窗口中显示第一位董事会成员的详细信息。 我如何将董事会成员的详细信息绑定到模式/弹出窗口，而不是始终显示第一位董事会成员的详细信息？：

<div class="modal-body-board-member-title">
   <p>      <?php echo   $team_board_member_title; ?> </p>
</div>
<img src="<?php echo $team_board_member_image_big['url']; ?>" alt="<?php echo $team_board_member_image_big['alt']; ?>">
<div class="modal-body-board-member-desc">             <?php echo   $team_board_member_desc; ?>  </div>
</div>

完整代码：

 <div class="row">
       <?php
          // check if the repeater field has rows of data
          if( have_rows('left_side_-_team') ):
          // loop through the rows of data

          // add a counter
          $count = 0;
          $group = 0;

          while ( have_rows('left_side_-_team') ) : the_row();
            // vars
            $team_board_member_name = get_sub_field('left_side_-_team_member_name');
            $team_board_member_title = get_sub_field('left_side_-_team_member_job_title');
            $team_board_member_image_small = get_sub_field('left_side_-_team_member_image');
            $team_board_member_desc = get_sub_field('left_side_-_team_member_description');
            $team_board_member_image_big = get_sub_field('left_side_-_team_member_large_image');

          //  $teacher_image = get_sub_field('teacher_photo');
            if ($count % 6 == 0) {
              $group++;
              ?>
       <div id="board-<?php echo $group; ?>" class="cf group-   <?php echo $group; ?>">
          <?php
             }
             ?>
          <div class="col-md-2">
             <div class="team-modal-member-make-bigger">
                <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">
                   <b> <?php echo $team_board_member_name; ?> </b>
                   <p>     <?php echo   $team_board_member_title; ?> </p>
                   <img src="<?php echo $team_board_member_image_small['url']; ?>" alt="<?php echo $team_board_member_image_small['alt']; ?>">
                </a>
             </div>
             <!-- close team modal member make bigger -->
             <!-- start modal -->
             <!-- Button HTML (to Trigger Modal) -->
             <!-- <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a> -->
             <!-- Modal HTML -->
             <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                   <div class="modal-content">
                      <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      </div>
                      <div class="modal-body">
                         <b>                <?php echo $team_board_member_name; ?> </b>
                         <div class="modal-body-board-member-title">
                            <p>      <?php echo   $team_board_member_title; ?> </p>
                         </div>
                         <img src="<?php echo $team_board_member_image_big['url']; ?>" alt="<?php echo $team_board_member_image_big['alt']; ?>">
                         <div class="modal-body-board-member-desc">             <?php echo   $team_board_member_desc; ?>  </div>
                      </div>
                      <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                   </div>
                </div>
             </div>
             <!-- end of modal -->
          </div>
          <!-- .teacher -->
          <?php
             if ($count % 6 == 2) {
               ?>
       </div>
       <!-- #teachers -->
       <?php
          }
          $count++;
          endwhile;
          else :
          // no rows found
          endif; ?>
    </div>
    <!-- close row-->

如何在点击时显示正确的div内容，而不是每次显示第一个div的内容？

0 个答案: