Question

我正在创建一个网站，每个网站都有一个特色图片。在每个类别中都有具有自己特色图片的帖子。我试图制作它，以便当您点击图像时，图库将滑动并显示侧面的所有图像。

我已经设置了所有内容，除了弄清楚如何拉出正确的类别，并清空它，当我关闭图库时（这样当我点击下一个类别图像时，我会从该类别中获得帖子）。< / p>

我已经设置了这样的HTML：

<div id="fullpage">
    <div class="section" data-cat="'.$catID.'" data-catName="'.$catName.'" style="background:url(\''.$image_url.'\'); background-size:cover;">image is in the div background</div>
</div>
<div id="gallery"></div>

这是一个foreach循环，显示所有类别和与之关联的图像。每个部分都有cat和catName，指定了这个类别。

现在我有一个功能

function gallery_posts(){

    $cat_id = get_post_meta($_REQUEST['cat']);

    $the_query = new WP_QUery(array(
        'cat'      => $cat_id,
        'posts_per_page' => -1,
        'order' => 'DESC'
    ));

    $output = '';

    if ($the_query -> have_posts()) :  while ($the_query -> have_posts()) : $the_query -> the_post();
        $output .= '<div class="gallery_single_image">';

        $output .= get_the_post_thumbnail();

        $output .= '</div>';

    endwhile; 
    endif;
    wp_reset_postdata();
    die($output);
}

此函数用于AJAX调用，以填充gallery div中的图像。在我的.js文件中我有

    var $content = $("#gallery");
    var $fullPage = $('#fullpage');
    var $galleryCat = $('#fullpage').find('.section');
    var $close = $('.close');  

    $galleryCat.on('click', function(){
        var catID = $(this).data('catid');
        load_posts(catID);
        $fullPage.addClass('galleryShow');
        $content.addClass('galleryShow');
        $close.fadeIn();
    });

    $close.on('click', function(){
        $fullPage.removeClass('galleryShow');
        $content.removeClass('galleryShow');
        $content.html('');
        $(this).fadeOut();
    });

    function load_posts(currentCat){
        var str = '&cat=' + currentCat + '&action=gallery_posts';
        $content.html();
        $.ajax({
            type: "POST",
            dataType   : "html",
            url: get_gallery_posts.ajaxurl,
            data: str,
            success: function(data){
                var $data = $(data);
                $content.html(data);
            },
            beforeSend : function(){
            },
            error : function() {
            },
            complete : function(){
            }
        });
        return false;
    }

ajaxurl正在工作，在functions.php文件中设置为wp_localize_script，一切正常。

问题在于，无论我点击什么图像，我都会收到所有帖子。这可能意味着我的$cat_id运行不正常（因此查询中没有正确的类别）。我喜欢它，当我点击一个类别时，我得到该类别的所有帖子。我有一个关闭按钮，它将删除图库div中的帖子，并切换宽度更改（当您单击图像时，图库将填充宽度的40％）。

也可以这样做，以便当我打开一个画廊时，当我点击图像时，当我的画廊打开时，更改画廊中的帖子？

Answer 1

发现错误！

在我的jquery中，我有var catID = $(this).data('catid');，它应该是

var catID = $(this).data('cat');

同样在我的ajax功能中我改变了

$cat_id = get_post_meta($_REQUEST['cat']);

到

$cat_id = (isset($_POST['cat'])) ? $_POST['cat'] : '';

现在加载正确的帖子:)

AJAX检索类别id wordpress

1 个答案: