手风琴按年份排序的帖子 - javascript

我有一个自定义类型的推荐信，并且帖子很少。我正在尝试创建一个按年份显示帖子的手风琴。因此，当您单击年份时，它将显示该年份的所有帖子（请参见下面的屏幕截图）。

手风琴按年份排序的帖子 - javascript

我已经有点用了，问题是当我单击年份时，它仅显示该年的一篇帖子。这是代码-> https://pastebin.com/3F98dcEU

            <?php get_header();?>
            <style>
            .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            margin-bottom:20px;
            }

            .active, .accordion:hover {
            background-color: #ccc; 
            }

            .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
            }
            </style>
            <div class="container-fluid testimonial-header">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h1>Testimonials</h1>
                    </div>
                </div>
            </div>
            <div class="container testimonial-content">
                <div class="block-1">
                    <h2 class="heading">Delivering Exceptional Customer Service</h2>
                    <p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
                </div>
            </div>
            <div class="container-fluid py-5 archive-testimonial">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                        <?php 
            global $wpdb;

            $posts = $wpdb->posts;

            //Get all unique years as "years" from posts where post type is equal to testimonials

            $sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC


            //Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters


            $result = $wpdb->get_results($sql);

            foreach($result as $rs) { ?>
                <button class="accordion"><?php echo $rs->years ;?></button>
                <?php $args = array(
                    'post_type' => 'testimonials',
                    'post_per_page'=> -1,
                    'post_status' => 'publish',
                    'orderby'   => 'date',
                    'order' => 'DESC',
                    'date_query' => array(array(
                        'year'=> $rs->years,
                    ),),

                );

                $loop = new WP_Query($args);

                if($loop->have_posts()) {

                    while($loop->have_posts()) : $loop->the_post(); ?>
                        <div class="panel testimonial-grid-archive testimonial-loop-ah">
                            <div>
                                <?php 
                                    if(has_post_thumbnail()) { ?>
                                        <div style="text-center">
                                                    <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                                                </div>
                                            <?php } else { ?>
                                                <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                                            <?php } 
                                            ?>
                                        </div>
                            <div class="testimonial-content">
                                <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
                                <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
                                <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
                                <p class="person-title-archive">- <?php the_title() ;?></p>
                            </div>
                        </div>


                    <?php endwhile;

                }
            }
                        ?>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                panel.style.display = "none";
                } else {
                panel.style.display = "block";
                }
            });
            }
            </script>
            <?php get_footer();?>

您可以尝试使用内置帖子类型的代码，然后您会明白我在说什么。

我的处理方法可能是完全错误的。

非常感谢您的帮助。

javascript参考方案

面板div位于while循环内，因此每篇文章都会重复进行。您应该在循环之外使用它，因此每年仅生成一次。

更改此：

while($loop->have_posts()) : $loop->the_post(); ?>
    <div class="panel testimonial-grid-archive testimonial-loop-ah">
        <div>
            <?php 
                if(has_post_thumbnail()) { ?>
                    <div style="text-center">
                                <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                            </div>
                        <?php } else { ?>
                            <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                        <?php } 
                        ?>
                    </div>
        <div class="testimonial-content">
            <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
            <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
            <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
            <p class="person-title-archive">- <?php the_title() ;?></p>
        </div>
    </div>
<?php endwhile;

对此：

<div class="panel testimonial-grid-archive testimonial-loop-ah">
    <?php while($loop->have_posts()) : $loop->the_post(); ?>
    <div>
        <?php 
        if(has_post_thumbnail()) { ?>
            <div style="text-center">
                <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
            </div>
        <?php } else { ?>
            <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
        <?php } ?>
        </div>
        <div class="testimonial-content">
            <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
            <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
            <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
            <p class="person-title-archive">- <?php the_title() ;?></p>
        </div>
    <?php endwhile; ?>
</div>

如何使用PHP从动态输入字段捕获数组值？ - javascript

我正在编写一个在线时间跟踪网页，允许用户将学习时间输入该系统。用户将首先输入名称，然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码，<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…

利用异步Json请求/方法调用来加快页面加载速度 - javascript

我正在研究由4个信息框组成的数字标牌，按照目前的情况，我向控制器发出1个单个Json请求，以检索将在这些框中显示的数据。 action方法在数据库中查询信息，并调用4个单独的私有方法，提供查询信息以填充要作为json返回到视图的列表。下面提供了示例代码。我的问题是，如何通过控制器侧的多线程或对4个独立操作方法的4个单独的Json请求来异步完成此操作。当前控制…

PHP stringID无法从回显中读入onclick - javascript

我有一个音频播放器，可以在HTML中正常工作，但是当我从PHP回显调用时，似乎没有得到div ID的名称，因此它无法播放我的音频。这是我的代码：// Show audio if ($sObj->get('audio') != null) { $sAudio = $sObj->get('audio'); $a…

在php中单击按钮添加表行并设置字段值 - javascript

我有一个表单，必须在单击按钮时添加表行。这是我必须动态添加的表行：（addProdToGroup.php）<tr style="text-align: center;" id="products"> <td><?php $j ?></td> <td><s…

如果复选框切换复选框已选中，则在切换div中输入必填字段 - javascript

我使用脚本用JavaScript切换了一些div。如果要选中复选框以显示toogle div，我想在toogle div中设置一些“必填”输入字段。有人能弄清楚吗？那是工作吗？function show(id) { if(document.getElementById) { var mydiv = document.getElementById(id); m…

推荐标签：, , , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]