jQuery点击Show more按钮如何获取动态div所有索引以加载分类下全部文章

问题原因 #

• 所有超出初始2篇的隐藏文章都使用了相同的id="$cat"属性，而HTML规范要求ID必须唯一，所以你用$("#"+ids)选择时只会匹配到第一个符合ID的元素，自然只能显示第一篇文章
• 现有逻辑没有做分批加载4篇的处理，是直接全显/全隐的逻辑，不符合需求

解决代码修改 #

1. PHP部分修改

<?php
$custom_terms = get_terms('genre');
foreach ($custom_terms as $custom_term) {
    wp_reset_query();
    $postsPerPage = -1;
    $current_category = "";
    $args = [
        'post_type' => 'film',
        'posts_per_page' => $postsPerPage,
        'orderby' => 'id',
        'order' => 'ASC',
        'tax_query' => [
            [
                'taxonomy' => 'genre',
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ],
        ],
    ];
    $loop = new WP_Query($args);
    $parent_included = false;
    if ($loop->have_posts()) {
        echo '<h2 class="text-actualites">' . $custom_term->name . '</h2>';
        $counter = 0;
        while ($loop->have_posts()) :
            $loop->the_post();
            $img = get_field('image', $post->ID);
            $cat = $custom_term->term_id;
            $current_category = $cat;
            if ($custom_term->name == "Adventure") {
                ?>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="card1 recrutements">
                        <div class="card-header">
                            <div>
                                <img src="<?php echo $img["url"]; ?>" class='mymap-icon' alt=''>
                            </div>
                            <div>
                                <span class="titre-recrutement">
                                    <div class="bnt-makers ">Communiqué de presse </div>
                                    <div> <?php echo get_the_date(); ?></div>
                                    <div class="bnt-maker "><?php the_field('nom', $post->ID); ?></div>
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <p><?php the_field('description', $post->ID); ?> </p>
                            <a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" rel="nofollow">
                                <span class="name-descripeion">En savoir plus</span>
                                <div class="btn-icon">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <?php
            } else {
                $counter++; 
                if (!$parent_included) {
                    // 给分类容器加唯一ID 方便后续选择
                    echo '<div id="category_'.$cat.'" class="category-post-wrap">';
                    $parent_included = true;
                }
                ?>
                <div class="col-lg-16 col-md-6 col-sm-12 col-xs-12 content">
                    <?php
                    if ($counter <= 2) {
                        echo "<div class='card recrutements'>";
                    } else {
                        // 去掉重复ID 改用分类标记类识别同分类文章
                        echo "<div class='card recrutements hide-block category-post-".$cat."' data-category='".$cat."'>";
                    }
                    ?>
                        <div class="card-header">
                            <div>
                                <img src="<?php echo $img["url"]; ?>" class='mymap-icon' alt=''>
                            </div>
                            <div>
                                <span>
                                    <div><?php echo '<p>' . $custom_term->name . '</p>'; ?></div>
                                    <div> <?php echo get_the_date(); ?></div>
                                    <div class="bnt-maker "><?php the_field('nom', $post->ID); ?></div>
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <p><?php the_field('description', $post->ID); ?> </p>
                            <a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" rel="nofollow">
                                <span class="name-descripeion">En savoir plus</span>
                                <div class="btn-icon">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <?php
            }
        endwhile;
        echo('</div>');
    }
    if ($custom_term->count > 2) {
        // 给按钮加已加载数量属性 初始为2
        echo "<div class='show-more' data-id='$current_category' data-loaded='2'>Show more</div>";
    }
}
?>

2. JS部分修改

$(document).ready(function(){
    $(".show-more").click(function(){
        let catId = $(this).attr("data-id");
        // 选中当前分类下所有未展示的隐藏文章
        let $hiddenPosts = $(".category-post-"+catId+".hide-block");
        // 每次显示前4篇隐藏内容
        $hiddenPosts.slice(0,4).removeClass("hide-block").css("display","block");
        // 更新已加载计数
        let newLoaded = parseInt($(this).attr("data-loaded")) + 4;
        $(this).attr("data-loaded", newLoaded);
        // 没有更多内容时修改按钮状态
        if($hiddenPosts.length <= 4){
            $(this).text("没有更多内容了").addClass("disabled");
        }
    });
});

内容的提问来源于stack exchange，提问作者Roberto