插入计数器时 ACF 中继器字段未打开模式

Posted 2023-03-25

【中文标题】插入计数器时 ACF 中继器字段未打开模式

【英文标题】：ACF repeater field not opening modal when inserting counter

【发布时间】：2017-01-24 11:57:24

【问题描述】：

尝试了几种方法，但都没有奏效，也不知道还能做什么。作为团队页面的一部分，我有一个带有 4 个子字段的转发器字段——图像、标题（标题）、链接（触发模式）和详细信息（模式文本内容）——其中一些应该在单击时打开一个带有额外信息的模式。模式工作正常，但是当我尝试在代码中插入一个计数器以打开每个团队成员的相应子字段时，它停止工作并且什么都没有打开。

这是一段代码。非常感谢任何帮助。

<div class="team-block w4 clear" >                      
    <?php 
        if( have_rows('team_member') ): 
            $counter = 1;
    ?>
    <ul>
        <?php 
            while( have_rows('team_member') ): the_row();

            // vars
            $image = get_sub_field('team_member_image');
            $title = get_sub_field('team_member_title');
            $link = get_sub_field('link_to_details');
            $details = get_sub_field('team_member_details');
        ?>
        <li class="team-member-box">
            <?php if( $link ): ?>
                <a href="<?php echo $link; ?>">
            <?php endif; ?>
            <img class="team-member-image" src="<?php echo $image['url']; ?>"  />
            <?php 
                echo $title; 
                if( $link ): 
            ?>
                </a>                    
            <?php 
                endif;  
                if( $link ): 
            ?>
                <div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
                    <button data-remodal-action="close" class="remodal-close"></button>
                    <h3>Qualifications</h3>                      
                    <p><?php echo $details; ?></p>
                </div>
            <?php endif; ?>                 
        </li>
        <?php 
            $counter++; 
            endwhile; 
        ?>                  
    </ul>                                                                   
    <?php endif; ?>                     
</div>

【参考方案1】：

看看这个：

<a href="#modal1">Modal №1</a>
<a href="#modal2">Modal №2</a>
<a href="#modal3">Modal №3</a>


<div class="remodal team-member-details" data-remodal-id="modal1">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h3>Qualifications</h3>
  <p>yeah</p>
</div>

<div class="remodal team-member-details" data-remodal-id="modal2">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h3>Qualifications</h3>
  <p>yeah 2</p>
</div>

<div class="remodal team-member-details" data-remodal-id="modal3">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h3>Qualifications</h3>
  <p>yeah 3</p>
</div>

这按预期工作。当我查看您的代码时，我假设单击图像应该触发模态，对吗？我是，试试这个：

<div class="team-block w4 clear" >

    <?php if( have_rows('team_member') ): ?>

    <?php $counter = 1; ?>


        <ul>

        <?php while( have_rows('team_member') ): the_row();

            // vars
            $image = get_sub_field('team_member_image');
            $title = get_sub_field('team_member_title');
            $link = get_sub_field('link_to_details');
            $details = get_sub_field('team_member_details');

            ?>



            <li class="team-member-box">


                    <a href="modal<?php echo $counter;?>">


                <img class="team-member-image" src="<?php echo $image['url']; ?>"  />

                <?php echo $title; ?>

                    </a>

                <?php if( $link ): ?>
                    <div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
                      <button data-remodal-action="close" class="remodal-close"></button>
                      <h3>Qualifications</h3>                        
                      <p><?php echo $details; ?></p>
                    </div>
                <?php endif; ?>

            </li>

        <?php $counter++; ?>    

        <?php endwhile; ?>

        </ul>

    <?php endif; ?>

</div>

我不确定这是否正确（不知道如何处理 $link var），但这应该可以。

【讨论】：

将# 添加到href“modal”之后就像一个魅力。我还需要将 if( $link ) 位保留在那里，因为我只想要一个模式供那些有额外内容要查看的人使用，而不是全部。非常感谢！

很高兴我能帮上忙！ :)