Question

我确信我没有以正确的方式做到这一点，但我只是在尝试找出完成这项工作的最佳方法。

基本上，我使用的是Wordpress，我创建了自己的主题，基于主题。

我有一个循环，即显示某个类别的帖子。

在页面顶部，我有一个菜单，我尝试将其用作过滤器。因此，当用户点击其中一个菜单项时，它会获取该项的ID，即类别ID，然后我尝试使用JQuery将div的内容替换为新的类别帖子。

当我尝试使用AJAX加载内容时，我得到了未定义的函数错误。所以我尝试将循环放入functions.php中的PHP函数中。

这是功能：

function get_vehicle_filter() {


$f = 0;

query_posts( array('cat' => '47', 'orderby' => 'ID', 'order' => 'ASC'));
while ( have_posts() ) : the_post();

$postid = get_the_ID();                         
$site_url = get_site_url(); 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
echo "<div class='job_image_holder'>";
echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
echo "<div class='job_image_title'>";
the_title( "<p class='white center'>", "</p>" );
echo "</div>";
echo "</div>";
echo "</a>";

$f++;

endwhile;
wp_reset_query();

}

我正在使用它来显示页面上的循环，这很好用：

<script>
  jQuery(document).ready(function(jQuery) {
    jQuery("#filtered_vehicles").html("<?php get_vehicle_filter() ?>");
  });
</script>

但是当我试图将点击的菜单项的ID输入到php函数中时，我正在倒下。这是最新版本：

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');        

        jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html('<?php $filterCat = ' + filterCat + '; get_vehicle_filter($filterCat) ?>').fadeIn('fast');
        });             

    });

我知道那不对，显然它不起作用!!

但是我一直在分析它是什么和不起作用，如果我尝试以最简单的形式调用该函数，就像我在上面加载页面时一样，如下所示，它不起作用？< / p>

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');        


        jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html('<?php get_vehicle_filter() ?>').fadeIn('fast');
        });             

    });

由于这在页面加载时有效，为什么在用JQuery替换完全相同的代码时它不起作用？

请有人指出我正确的方向。

感谢你！

Answer 1

PHP在服务器上执行。因此，当您为页面提供服务时，jQuery html（）中的内容已经编写完成。您的函数get_vehicle_filter（）已被调用，返回值出现在jQuery中（“＃filtered_vehicles”）。html（）。

您需要做的是在click事件中，对返回get_vehicle_filter（）的文件进行AJAX调用。这样的事情：

jQuery('.vehicle_filter_item').click(function() {

    // capture id from clicked button
    var filterCat = jQuery(this).attr('id');  

    $.ajax({
      method: "POST",
      url: "file_that_calls_get_vehicle_filter.php",
      data: { filter: filterCat }
    })
   .done(function( result ) {
      jQuery('#filtered_vehicles').fadeOut('fast', function() {
         jQuery("#filtered_vehicles").html(result).fadeIn('fast');
    });
   });


});

希望它能让你走上正确的道路。

Answer 2

是的，这就是我的工作方式。

Ajax电话：

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');  

        jQuery.ajax({
          method: "POST",
          url: "ajax-functions.php",
          data: "filterCat="+ filterCat,
        })
       .done(function( result ) {
          jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html(result).fadeIn('fast');
        });
       });


    });

功能:(在页面加载时调用）

function get_vehicle_filter() {     
$f = 0;

    query_posts( array('cat' => '47', 'orderby' => 'ID', 'order' => 'ASC'));
    while ( have_posts() ) : the_post();

    $postid = get_the_ID();                         
    $site_url = get_site_url(); 
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

    echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
    echo "<div class='job_image_holder'>";
    echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
    echo "<div class='job_image_title'>";
    the_title( "<p class='white center'>", "</p>" );
    echo "</div>";
    echo "</div>";
    echo "</a>";

    $f++;

    endwhile;
    wp_reset_query();

}

通过AJAX调用的函数ajax-functions.php

define('WP_USE_THEMES', false);

require_once('../../../wp-blog-header.php'); 


if($_POST['filterCat'] == "") {
    $filterCat = '47';
} else {
    $filterCat = $_POST['filterCat'];
}

$f = 0;

query_posts( array('cat' => $filterCat, 'orderby' => 'ID', 'order' => 'ASC'));
while ( have_posts() ) : the_post();

$postid = get_the_ID();                         
$site_url = get_site_url(); 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
echo "<div class='job_image_holder'>";
echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
echo "<div class='job_image_title'>";
the_title( "<p class='white center'>", "</p>" );
echo "</div>";
echo "</div>";
echo "</a>";

$f++;

endwhile;
wp_reset_query();

所以，基本上，我无法让这个工作的原因是因为在AJAX调用中，这是一个单独的文件，我在顶部缺少这两行：

define('WP_USE_THEMES', false);

require_once('../../../wp-blog-header.php');

JQuery调用PHP函数问题

2 个答案: