如何在单击时使用 jQuery 动态加载 WordPress 自定义帖子类型数据？

Question

我将尝试解释我在这里尝试做的事情。我创建了一个名为“人物”的自定义帖子并创建了一些新帖子。现在，我已经创建了一个带有静态内容的 JS 模态，它可以工作。但是，我不想在加载页面时加载自定义帖子类型中的所有帖子，而是只想显示每个特定 ID 的点击模式数据。而不是在加载时有 10 或 20 个相同的模态输出 HTML。所以点击..我想显示这个特定CP帖子的数据。模态人物提要 HTML（每个图打开一个模态）：<section class="feed">    <div class="container">        <div class="row content">            <h1><?php the_title(); ?></h1>            <div class="feed__inner">                <figure data-post-id="1" class="feed__item">                    <img class="feed__image" data-src="https://images.pexels.com/photos/1845534/pexels-photo-1845534.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />                </figure>                <figure data-post-id="2" class="feed__item">                    <img class="feed__image" data-src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />                </figure>                <figure data-post-id="3" class="feed__item">                    <img class="feed__image" data-src="https://images.pexels.com/photos/2613260/pexels-photo-2613260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />                </figure>                <figure data-post-id="4" class="feed__item">                    <img class="feed__image" data-src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />                </figure>如何仅在请求/单击时加载模态数据？

Answer 1

你可以用 AJAX 做到这一点。

创建根据 single-people.php需要输出帖子的文件，并在弹出窗口打开时通过 ajax 请求它。

例如（假设 jquery）

<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>