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

Question

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

现在，我已经使用 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>

                <figure data-post-id="5" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/1782286/pexels-photo-1782286.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="6" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="7" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/1468379/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="8" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/2590709/pexels-photo-2590709.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="9" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/247206/pexels-photo-247206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="10" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/1599980/pexels-photo-1599980.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="11" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/1172784/pexels-photo-1172784.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

                <figure data-post-id="12" class="feed__item">
                    <img class="feed__image" data-src="https://images.pexels.com/photos/1624229/pexels-photo-1624229.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                </figure>

            </div>
        </div>
    </div>
</section>

<?php require THEME_DIR_COMPONENTS . '/modal.php'; ?>

我的模态 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>

如何仅在请求/点击时加载模态数据？

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>