Javascript 如何实现一个组件来最初显示多个div元素，然后再显示多个元素？

我用HTML、PHP和AJAX构建了一个审查系统，这样用户就可以在网站上发表他们的意见。此审查系统由两个脚本组成：

PHP脚本：

<?php
... code
?>

<div class="overall_rating">
    <span class="num"><?=number_format($reviews_info['overall_rating'], 1)?></span>
    <span class="stars"><?=str_repeat('&#9733;', round($reviews_info['overall_rating']))?></span>
    <span class="total"><?=$reviews_info['total_reviews']?> reviews</span>
</div>
<a href="#" class="write_review_btn">Schrijf review</a>
<div class="write_review">
    <form>
        <input name="name" type="text" placeholder="Uw voornaam" required>
        <input name="rating" type="number" min="1" max="5" placeholder="Uw beoordeling (1-5)" required>
        <textarea name="content" placeholder="Schrijf hier uw review" required></textarea>
        <button type="submit">Plaats review</button>
    </form>
</div>
<?php foreach ($reviews as $review): ?>
<div class="review">
    <h3 class="name"><?=htmlspecialchars($review['name'], ENT_QUOTES)?></h3>
    <div>
        <span class="rating"><?=str_repeat('&#9733;', $review['rating'])?></span>
        <span class="date"><?=time_elapsed_string($review['submit_date'])?></span>
    </div>
    <p class="content"><?=htmlspecialchars($review['content'], ENT_QUOTES)?></p>
</div>
<?php endforeach ?>

<div class="container wow fadeInDown content home" data-wow-duration="500ms">
   <div class="reviews"></div>
   <script>
      const reviews_page_id = 1;
      fetch("reviews.php?page_id=" + reviews_page_id).then(response => response.text()).then(data => {
        document.querySelector(".reviews").innerHTML = data;
        document.querySelector(".reviews .write_review_btn").onclick = event => {
            event.preventDefault();
            document.querySelector(".reviews .write_review").style.display = 'block';
            document.querySelector(".reviews .write_review input[name='name']").focus();
        };
        document.querySelector(".reviews .write_review form").onsubmit = event => {
            event.preventDefault();
            fetch("reviews.php?page_id=" + reviews_page_id, {
                method: 'POST',
                body: new FormData(document.querySelector(".reviews .write_review form"))
            }).then(response => response.text()).then(data => {
                document.querySelector(".reviews .write_review").innerHTML = data;
            });
        };
      });
   </script>
</div>

评论
普拉茨评论

HTML-/AJAX脚本：

<?php
... code
?>

<div class="overall_rating">
    <span class="num"><?=number_format($reviews_info['overall_rating'], 1)?></span>
    <span class="stars"><?=str_repeat('&#9733;', round($reviews_info['overall_rating']))?></span>
    <span class="total"><?=$reviews_info['total_reviews']?> reviews</span>
</div>
<a href="#" class="write_review_btn">Schrijf review</a>
<div class="write_review">
    <form>
        <input name="name" type="text" placeholder="Uw voornaam" required>
        <input name="rating" type="number" min="1" max="5" placeholder="Uw beoordeling (1-5)" required>
        <textarea name="content" placeholder="Schrijf hier uw review" required></textarea>
        <button type="submit">Plaats review</button>
    </form>
</div>
<?php foreach ($reviews as $review): ?>
<div class="review">
    <h3 class="name"><?=htmlspecialchars($review['name'], ENT_QUOTES)?></h3>
    <div>
        <span class="rating"><?=str_repeat('&#9733;', $review['rating'])?></span>
        <span class="date"><?=time_elapsed_string($review['submit_date'])?></span>
    </div>
    <p class="content"><?=htmlspecialchars($review['content'], ENT_QUOTES)?></p>
</div>
<?php endforeach ?>

<div class="container wow fadeInDown content home" data-wow-duration="500ms">
   <div class="reviews"></div>
   <script>
      const reviews_page_id = 1;
      fetch("reviews.php?page_id=" + reviews_page_id).then(response => response.text()).then(data => {
        document.querySelector(".reviews").innerHTML = data;
        document.querySelector(".reviews .write_review_btn").onclick = event => {
            event.preventDefault();
            document.querySelector(".reviews .write_review").style.display = 'block';
            document.querySelector(".reviews .write_review input[name='name']").focus();
        };
        document.querySelector(".reviews .write_review form").onsubmit = event => {
            event.preventDefault();
            fetch("reviews.php?page_id=" + reviews_page_id, {
                method: 'POST',
                body: new FormData(document.querySelector(".reviews .write_review form"))
            }).then(response => response.text()).then(data => {
                document.querySelector(".reviews .write_review").innerHTML = data;
            });
        };
      });
   </script>
</div>

const reviews\u page\u id=1；
fetch（“reviews.php？page_id=“+reviews_page_id”）。然后（response=>response.text（））。然后（data=>{
document.querySelector（“.reviews”）.innerHTML=数据；
document.querySelector（“.reviews.write\u review\u btn”）。onclick=event=>{
event.preventDefault（）；
document.querySelector（“.reviews.write_review”）.style.display='block'；
document.querySelector（“.reviews.write_review input[name='name']”）。focus（）；
};
document.querySelector（“.reviews.write_review form”）.onsubmit=event=>{
event.preventDefault（）；
fetch（“reviews.php？page_id=“+reviews_page_id{
方法：“POST”，
正文：新表单数据（document.querySelector（“.reviews.write\u review form”））
})。然后（response=>response.text（））。然后（data=>{
document.querySelector（“.reviews.write_review”）.innerHTML=数据；
});
};
});

我不知道如何实现一个组件来最初显示多个div元素，然后再显示多个元素。例如：打开网站时，最初仅显示10条评论（但保留总体评级），单击某个组件后，再显示10条评论

所以这不是关于过滤数据，而是关于显示或不显示div元素。我试图用Stackoverflow中的一个简单示例来重现这一点（请参见下面的代码片段），但我仍然不知道如何在自己的代码中实现这一点。你知道如何做到这一点吗

示例：

数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据1
数据2
数据20
风险价值限额=5；
每页var=5；
jQuery（'#reviews>div.review:gt（+（limit-1）+'））.hide（）；
if（jQuery（“#reviews>div.review”）.length执行“加载更多”类型功能的典型方式是在加载时立即显示10项

然后，当用户请求附加项时，您可以进行AJAX调用以获取附加项，然后使用Javascript将它们附加到列表中


为了获取代码片段并将其应用到代码中，它应该相当简单。您可以继续打印出所有评论并隐藏那些
。评论：gt（x）
限制。这不会遵循上述模式，但应该继续提供您要找的结果