Как показывать правильный контент div по клику, а не контент из первого div каждый раз? - PullRequest
Новая
       9

Как показывать правильный контент div по клику, а не контент из первого div каждый раз?

0 голосов
/ 28 февраля 2019

Я использую дополнительные настраиваемые поля плагина WordPress & bootstrap 3.

Использование расширенного повторителя настраиваемого поля left_side_-_team Я показываю имя члена правления ($team_board_member_name), название ($team_board_member_title) и маленькое изображение ($team_board_member_image_small).Это показывает список членов правления и их детали.Затем я хочу, чтобы пользователь мог нажимать на определенное маленькое изображение, и чтобы модальное / всплывающее окно показывало детали этого конкретного члена правления, вместо того, чтобы всегда показывать детали первого члена правления, независимо от того, какое маленькое изображение имеетбыл нажат.

Я знаю, что мне нужно перебрать 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-->
...