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

我将尝试解释我在这里尝试做的事情。我创建了一个名为“人物”的自定义帖子并创建了一些新帖子。


现在,我已经创建了一个带有静态内容的 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>


如何仅在请求/单击时加载模态数据?


UYOU
浏览 131回答 1
1回答

慕斯709654

你可以用 AJAX 做到这一点。创建根据 single-people.php需要输出帖子的文件,并在弹出窗口打开时通过 ajax 请求它。例如(假设 jquery)<script>&nbsp; &nbsp; function openPopup(id)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; fetch('http://example.com?p='+id).then(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#popup-content').html(response.body);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.popup').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; }</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>
打开App,查看更多内容
随时随地看视频慕课网APP