Javascript 如何通过点击jQuery动态加载WordPress自定义帖子类型数据？

我会尽力解释我在这里要做什么。我已经创建了一个名为“人”的自定义帖子，并创建了一些新帖子

现在，我用JS创建了一个模式，其中包含静态内容，可以正常工作

但是，我不想在加载页面时从自定义帖子类型加载所有帖子，我只想在单击时显示每个特定ID的模式数据，而不是在加载时有10或20个相同的模式输出HTML

所以点击。。我想展示这个特定CP帖子的数据

模态人员输入HTML（每个图形打开一个模态）：

我的模式HTML：

<section class="modal">
        <div class="modal__inner">
        <div class="modal__bg"></div>
        <span class="btn btn__close btn__close--primary btn__close--large btn__close--top-right btn__close--highlighted"></span>
            <div class="container">
                <div class="row modal__wrapper modal__wrapper--large modal__wrapper--dark">
                    <div class="col-lg-7">
                        <div class="modal__image">
                            <img draggable="false" src="https://images.pexels.com/photos/2613260/pexels-photo-2613260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Test">
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <div class="modal__content">
                            <div class="modal__content--top">
                                <h1 class="modal__title">Chantall <span>Dans</span></h1>
                                <span class="modal__date">15.9.2019</span>
                                <span class="modal__category">Muziek</span>
                            </div>

                            <div class="modal__content--bottom">
                                <div class="modal__description">
                                    <p class="modal__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
                                    <a href="#instagram" class="modal__url modal__url--secondary" target="_blank">
                                        <span class="icon icon__instagram"></span>
                                        Chantall95
                                    </a>
                                </div>
                            </div>

                            <div class="modal__content--bottom">
                            <h4 class="modal__subtitle">Tags</h4>
                                <div class="modal__description">
                                    <ul class="tag__list">
                                        <li class="tag__item tag__item--primary">Modern</li>
                                        <li class="tag__item tag__item--primary">Breakdance</li>
                                        <li class="tag__item tag__item--primary">Freestyle</li>
                                        <li class="tag__item tag__item--primary">urban</li>
                                        <li class="tag__item tag__item--primary">Pop</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

尚塔尔丹
15.9.2019
穆齐克
知识本身就是一种美德，它是一种美德，是一种美德。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务
标签

现代的
霹雳舞
自由泳
城市
弹出窗口

---

如何仅在请求/单击时加载模式数据？

您可以使用AJAX实现

创建

single people.php

文件，根据需要输出帖子，或者在弹出窗口打开时通过ajax请求帖子

e、 g.（假设jquery）

函数openPopup（id）
{
取（'http://example.com?p=那么,(
功能（响应）{
$（'#弹出内容'）.html（response.body）；
$（'.popup'）.show（）；
});
}
打开弹出窗口#1
打开弹出窗口#2

我可以获取帖子类型的帖子吗？您可以获取一个页面single-people.php，该页面呈现自定义帖子类型中的项目。您是对的，因为存在使用single-people的帖子类型“people”。php将获取正确的数据。谢谢，我会试试的。

<section class="modal">
        <div class="modal__inner">
        <div class="modal__bg"></div>
        <span class="btn btn__close btn__close--primary btn__close--large btn__close--top-right btn__close--highlighted"></span>
            <div class="container">
                <div class="row modal__wrapper modal__wrapper--large modal__wrapper--dark">
                    <div class="col-lg-7">
                        <div class="modal__image">
                            <img draggable="false" src="https://images.pexels.com/photos/2613260/pexels-photo-2613260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Test">
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <div class="modal__content">
                            <div class="modal__content--top">
                                <h1 class="modal__title">Chantall <span>Dans</span></h1>
                                <span class="modal__date">15.9.2019</span>
                                <span class="modal__category">Muziek</span>
                            </div>

                            <div class="modal__content--bottom">
                                <div class="modal__description">
                                    <p class="modal__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
                                    <a href="#instagram" class="modal__url modal__url--secondary" target="_blank">
                                        <span class="icon icon__instagram"></span>
                                        Chantall95
                                    </a>
                                </div>
                            </div>

                            <div class="modal__content--bottom">
                            <h4 class="modal__subtitle">Tags</h4>
                                <div class="modal__description">
                                    <ul class="tag__list">
                                        <li class="tag__item tag__item--primary">Modern</li>
                                        <li class="tag__item tag__item--primary">Breakdance</li>
                                        <li class="tag__item tag__item--primary">Freestyle</li>
                                        <li class="tag__item tag__item--primary">urban</li>
                                        <li class="tag__item tag__item--primary">Pop</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<script>
    function openPopup(id)
    {
        fetch('http://example.com?p='+id).then(
         function(response){
            $('#popup-content').html(response.body);
            $('.popup').show();
         });
    }
</script>

<button onclick="openPopup(1)">Open popup #1</button>
<button onclick="openPopup(2)">Open popup #2</button>

<div class="popup">
<div id="popup-content"></div>
</div>