WordPress ACF пытается скрыть и показать div в списке, используя поле повтора ACF - PullRequest
Новая
       16

WordPress ACF пытается скрыть и показать div в списке, используя поле повтора ACF

0 голосов
/ 30 мая 2018

Привет, я в основном создаю страницу справки, где есть динамический список, созданный с использованием поля повторителя.

В каждом элементе списка есть строка текста, которая при нажатии должна отображать еще какой-то контент (и скрывать его при повторном нажатии).

Теперь я могу заставить его работать для первого элемента в списке ... но каждый новый элемент показывает / скрывает только первый элемент.

Я предполагаю, что мне нужно сделать некоторые для каждого для идентификатора или что-то, что я просто не знаю, как.

Спасибо за любую помощь, вот код: 

<?php if (have_rows('video_felt')): ?>
        <ul>
            <?php while (have_rows ('video_felt')): the_row();
            //vars
            $afsnitOverskrift = get_sub_field('afsnit_titel');
            ?>
                <li>
                    <?php if($afsnitOverskrift): ?>
                         <?php echo $afsnitOverskrift; ?>
                    <?php endif;?>

                </li>
                    <?php if (have_rows('video_liste')): ?>    
                        <ul>
                            <?php while (have_rows ('video_liste')): the_row();
                            //vars
                            $videListe = get_sub_field('video_navn');
                            $videoLinker = get_sub_field('vide_link');?>
                            <li onclick="myFunction()">
                                <?php if($videListe): ?>
                                    <a  ><?php echo $videListe; ?></a> 
                                    <div id="myDIV" style="display:none;">
                                        <div class="youtube-player" data-id="<?php echo $videoLinker;?>"></div>

                                    </div>   
                                <?php endif;?>
                            </li>
                            <?php endwhile;?>
                        </ul>
                    <?php endif;?>
            <?php endwhile; ?>
        </ul>
        <?php endif;?>
<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
</script>

1 Ответ

0 голосов
/ 30 мая 2018

Я просто редактирую ваш код с помощью jquery, пожалуйста, проверьте ниже рабочий код. 

<?php if (have_rows('video_felt')): ?>
    <ul class="videoul">
        <?php while (have_rows ('video_felt')): the_row();
        //vars
        $afsnitOverskrift = get_sub_field('afsnit_titel');
        ?>
            <li>
                <?php if($afsnitOverskrift): ?>
                     <?php echo $afsnitOverskrift; ?>
                <?php endif;?>

            </li>
                <?php if (have_rows('video_liste')): ?>    
                    <ul>
                        <?php while (have_rows ('video_liste')): the_row();
                        //vars
                        $videListe = get_sub_field('video_navn');
                        $videoLinker = get_sub_field('vide_link');?>
                        <li >
                            <?php if($videListe): ?>
                                <a  ><?php echo $videListe; ?></a> 
                                <div class="myDIV" style="display:none;">
                                    <div class="youtube-player" data-id="<?php echo $videoLinker;?>"></div>

                                </div>   
                            <?php endif;?>
                        </li>
                        <?php endwhile;?>
                    </ul>
                <?php endif;?>
        <?php endwhile; ?>
    </ul>
    <?php endif;?>

jQuery 

    <script>
      jQuery(document).ready(function(){

        jQuery('body').on('click', 'ul.videoul li', function() {
           jQuery("div.myDIV").hide();
           jQuery(this).find("div.myDIV").toggle();

        });
      });
   </script>
...