如何仅针对单击显示更多按钮的当前 div 显示动态元素

Posted 2023-05-09

【中文标题】如何仅针对单击显示更多按钮的当前 div 显示动态元素

【英文标题】：How to display dynamic elements only for current div clicked on the show more button

【发布时间】：2021-11-15 02:09:18

【问题描述】：

我有动态类别。在单击每个类别的“显示更多”按钮时，我们应该只显示该类别的元素。在我的情况下，当我单击一个类别的“显示更多”按钮时，会显示带有“显示更多”按钮的所有类别的数据。这就是问题。我只想显示单击的当前 div 的数据。

<style>
 .hide-block 
   display: none ;


  </style>
  
  <div class="container">

     <?php
        $custom_terms = get_terms('genre');

        foreach ($custom_terms as $custom_term) 
            wp_reset_query();
            $postsPerPage = -1;

            $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>' . $custom_term->name . '</h2>';

                $counter = 0;
                $count_posts = count($loop->have_posts());
                $i = 0;

                while ($loop->have_posts()) :

                    $loop->the_post();
                    $i++;

                    $img = get_field('image', "$post->ID");

                    $cat = $custom_term->term_id;

                    if ($custom_term->name == " Adventure") 
                    ?>

                     <div class="col-lg-12 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>

                                 </div>
                             </div>
                             <div class="card-body">
                                 <p><?php the_field('description', $post->ID); ?> </p>

                                 <a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" target="_blank" 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) 
                           echo '<div id="parentId">';
                           $parent_included = true;
                        
                        
                ?>
                <div class="col-lg-16 col-md-6 col-sm-12 col-xs-12" class="content">
                         <?php
                            if ($counter <= 2) 
                                echo ("<div class='card recrutements' data-id='$cat'>");
                             else 
                                echo ("<div class='card recrutements hide-block' data-id='$cat'>");
                                //var_dump($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>

                             </div>
                         </div>
                         <div class="card-body">
                             <p><?php the_field('description', $post->ID); ?> </p>

                             <a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" target="_blank" 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) 
                echo '  <div class="show-more">Show more</div> ';
               
            
        
    ?>

 </div>
 <script>

$(document).ready(function()

    $(".show-more").click(function()


     $("div.card").css("display": "block");
    

    );

);
   </script>

【问题讨论】：

您会在this 示例中找到单击的元素

I tty 它，但我没有定义

【参考方案1】：

在这种情况下，您的 onclick 函数没有正确定位。目前，只要单击 any Show More 按钮，就会显示具有 card 类的 any div。您需要在每张卡片上设置一个 id 以正确指定要打开的卡片，如下所示。

<style>
div 
    display: none;

</style>

<script>

const hideCards = () => 
    $('div.card').css('display': 'none');


const showCard1 = () => 
    hideCards();
    $('div#card1').css('display': 'block');


const showCard2 = () => 
    hideCards();
    $('div#card1').css('display': 'block');

</script>

<div>
    <div class="card" id="card1">
        <p>Card 1 content</p>
    </div>
    <div class="card" id="card2">
        <p>Card 2 content</p>
    </div>

    <button onclick="showCard1">Show Card 1</button>
    <button onclick="showCard2">Show Card 2</button>
</div>

我不确定这是不是最好的方法，或者这是否有效，但这是您需要的一般要点。请注意，您可以使用数据属性 (attr) 或通过索引 DOM 中的元素 (eq) 以编程方式执行此操作。

【讨论】：

谢谢，但是我不懂jquery

@Roberto 去学习 jQuery 或 vanilla DOM 操作，除了前端框架之外，只有这两种方法可以做你想做的事

我努力学习。但急需这个。

我没有找到解决方案。我需要你的帮助。