jQuery變量以使用Ajax和php引導模態（使用Wordpress）

Question

我有一個包含ID的元素。 打開模態時，我試圖通過此ID。 該ID然后用於獲取Wordpress帖子。

加載並單擊具有類（openModalStaff）的元素時，我成功獲取了ID並將其作為屬性分配給該元素。 我也可以打開模態。 我不能做的是在模態中顯示變量，然后將其用於定位正確的Wordpress帖子。

有任何想法嗎？

JS：

    jQuery(".page_meet_the_team").bind("DOMSubtreeModified", function() {

    jQuery('.openModalStaff').each(function(i, obj) {
        var staffIDAdd = jQuery(this).find('.wd_member_id').text().trim();  
        jQuery(this).attr('data-id', staffIDAdd);
    });

    jQuery(".openModalStaff").unbind().click(function() {
        // Get ID of staff
        var staffID = jQuery(this).attr("data-id"); 
        console.log('fire');

        // Post variable to PHP
        jQuery.ajax(
            {
            url: "https://www.example.com/wp-content/themes/voisen-child/partials/partial-staff-modal-ajax.php",
            type: "POST",
            data: { id: staffID},
            success: function (result) {
                console.log(staffID);
                // Fire modal
                jQuery('#staffModal').modal('show');    
            }
        });


    });

});

PHP：

if (isset($_POST['id']) && !empty($_POST['id'])) {
    echo $_POST['id'];
} else {
    echo 'not set';
}

模態：

<div class="modal fade" id="staffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                </div>
                <div class="modal-body">
                    <?php
                    $type = 'team';
                    $args = array(
                      'post_type' => $type,
                      'post_status' => 'publish',
                      'posts_per_page' => 1,
                      'p' => JQUERY UNIQUE ID
                      );

                    $my_query = null;
                    $my_query = new WP_Query($args);
                    if( $my_query->have_posts() ) {
                        while ($my_query->have_posts()) : $my_query->the_post();
                        ?>
                        <div class="staffModalRow">
                            <div class="staffModalLeft">
                                <?php the_post_thumbnail('full'); ?>
                            </div>
                            <div class="staffModalRight">
                                <h2><?php the_title(); ?></h2>
                                <p><?php the_content(); ?></p>
                            </div>
                        </div>
                        <?php
                        endwhile;
                    }
                    wp_reset_query();
                    ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我最終采取了另一種方法。 在Wordpress中需要模態，因此我在循環內對每個項目使用了模態，並使用ID來定位唯一的模態，這意味着當我單擊鏈接時，我能夠直接傳遞ID並將所需數據打開到模態

寧願使用像上面那樣的jQuery / AJAX的更整潔的方式，並且只使用一個模式，但是由於某種原因，$ _ POST只是沒有傳遞數據。