Question

我从Wordpress帖子创建了一个Bootstrap Accordion。手风琴创造没有问题。手风琴的每个元素都有一个标题（作为Wordpress帖子的标题）。每个元素都有一个显示模态框的按钮。

我希望模态框标题与调用它的手风琴元素的标题完全相同。

使用while循环创建Accordion。我不知道模式框HTML是否也应该包含在这个循环中？也许我应该保留表格中的标题，根据点击的按钮，我将获得相应的标题？

这是模态框中有问题的标题：

<h4><?php echo the_title(); ?></h4>

当前只显示accordion元素的第一个标题，无论点击哪个手风琴元素按钮

我的代码在这里：

<!-- accordion -->
      <div id="accordion-career" class="accordion" role="tablist">
        <!-- card 1 -->
        <?php
          $count = 1;
         ?>
        <?php $loop = new WP_Query( array( 'post_type' => 'oferty_pracy', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
        <?php while( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div class="card">
          <div class="card-header" role="tab" id="career-acc-<?php echo $count; ?>">
            <a class="collapsed" data-toggle="collapse" href="#career-coll-<?php echo $count; ?>" role="button" aria-expanded="false" aria-controls="career-coll-<?php echo $count;?>">
                <span><?php the_title(); ?></span><i class="fas fa-lg fa-angle-down rotate-icon"></i>
              </a>
          </div>
          <div id="career-coll-<?php echo $count; ?>" class="collapse" role="tabpanel" aria-labelledby="career-acc-<?php echo $count; ?>" data-parent="#accordion-career">
            <div class="card-body">
              <div class="container-fluid">
              <!-- body of the accordion element -->
                <div class="row">
                  <div class="col-md-6 career-btn">
                    <button type="button" class="global-btn btn" data-toggle="modal" data-target="#careerModal"><span class="nav-text">Aplikuj na to stanowisko</span><i class="fa-xs fas fa-arrow-right"></i></button>
                    <a href="<?php the_field('plik_oferty'); ?>" role="button" class="global-btn btn"><span class="nav-text">Pobierz w pdf</span><i class="fa-xs fas fa-arrow-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Career MODAL -->
        <div class="modal fade" id="careerModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5>Aplikujesz na stanowisko:</h5>
                <h4><?php echo the_title(); ?></h4>
              </div>
              <div class="modal-body">
                <!-- FORM body of the modal -->
              </div>
              <!-- end of form -->
            </div>
          </div>
        </div>
        <!-- End of modal -->
        <?php
          $count++;
          endwhile;
        ?>
        <!-- end -->
      </div>
      <!-- end of accordion -->

Answer 1

为每张卡片的标题元素添加ID，例如卡片1的title1，卡片2的title2 ...
为MODAL标题元素提供ID，例如modalHeader
单击卡片按钮时触发JavaScript功能
JavaScript函数将标题从卡片复制到MODAL标题

例如

function refreshModalTitle(postId) {
    var title = document.getElementById('title' + postId).innerHTML;
    document.getElementById('modalHeader').innerHTML= title ;
}

如何将手风琴的WP帖子标题插入模态框

1 个答案: