尝试使用动态过滤器,该过滤器将通过单击按钮按自定义分类法过滤自定义帖子类型。是得到了一个错误的ajax\\u url是未定义的,但我想我已经解决了这一部分。。。然而,我现在剩下的东西仍然不起作用,但没有错误!我希望所有产品在默认情况下显示,然后按应用程序和分析器对其进行过滤functions.php 文件:
function ajax_filter_tests_scripts() {
wp_enqueue_script( \'ajax_filter_tests\', get_stylesheet_directory_uri(). \'/src/js/components/_filter.js\', array(), \'1.0\', true );
wp_localize_script(\'ajax_filter_tests\', \'ajax_url\', admin_url(\'admin-ajax.php\') );
}
function ajax_filter_tests_shortcode() {
ajax_filter_tests_scripts();
ob_start(); ?>
<a href="#"><i class="fas fa-th"></i> All Products</a>
<?php
global $post;
$applications = wp_get_post_terms( $post->ID, \'applications\' );
$thisAnalyser = get_field(\'select_analyser_for_test_filter\');
foreach ( $applications as $application):
$tests = new WP_Query(
array(
\'post_type\' => \'tests\',
\'tax_query\' => array(
array(
\'taxonomy\' => \'applications\',
\'terms\' => array($application->slug),
\'field\' => \'slug\'
),
),
)
);
?>
<a href="#"><?php echo $application->name; ?></a>
<?php
$tests = null;
wp_reset_postdata();
endforeach;
?>
<?php
return ob_get_clean();
}
add_shortcode(\'ajax_filter_tests\', \'ajax_filter_tests_shortcode\');
//Ajax Callback
add_action(\'wp_ajax_ajax_filter_tests\', \'ajax_filter_tests_callback\');
add_action(\'wp_ajax_nopriv_ajax_filter_tests\', \'ajax_filter_tests_callback\');
function ajax_filter_tests_callback() {
header("Content-Type: application/json");
$thisAnalyser = get_field(\'select_analyser_for_test_filter\');
$tax_query = array(\'relation\' => \'AND\');
if(isset($_GET[\'application\'])) {
$application = sanitize_text_field( $_GET[\'application\'] );
$tax_query[] = array(
\'taxonomy\' => \'applications\',
\'field\' => \'slug\',
\'terms\' => $application
);
}
if(isset($thisAnalyser)) {
$analyser = $thisAnalyser;
$tax_query[] = array(
\'taxonomy\' => \'analyser\',
\'field\' => \'slug\',
\'terms\' => $analyser
);
}
$args = array(
\'post_type\' => \'tests\',
\'posts_per_page\' => -1,
\'tax_query\' => $tax_query
);
$test_query = new WP_Query( $args );
if( $test_query->have_posts() ) {
$result = array();
while ( $test_query->have_posts() ) {
$test_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_field(\'test_title\'),
"subtitle" => get_field(\'test_subtitle\'),
"image" => get_field(\'test_image\'),
"permalink" => the_permalink()
);
}
wp_reset_query();
echo json_encode($result);
}
wp_die();
}
在我的
_filter.js 文件:
$ = jQuery;
var aft = $("#ajax-filter-tests");
var aftLinks = aft.find(\'a\');
aftLinks.click(function(e) {
e.preventDefault();
var application = $(e.target).text();
var application_slug = application.replace(/\\s+/g, \'_\').toLowerCase();
console.log(application_slug);
var data = {
action : "ajax_filter_tests",
application : application_slug
}
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
aft.find(\'#filterResults\').empty();
if(response) {
for(var i = 0; i < response.length; i++) {
var html = "<div class=\'test-filters__results__holder\'>";
html += " <div class=\'test__holder__image\'>";
html += " <img src=\'" + response[i].image + "\' alt=\'" + response[i].title + "\' />";
html += " </div>";
html += " <div class=\'test__holder__text\'>";
html += " <h4>" + response[i].title + "</h4>";
html += " <h5>" + response[i].subtitle + "</h5>";
html += " <a href=\'" + response[i].permalink + "\'>Learn More</a>";
html += " </div>";
html += "</div>";
aft.find(\'.test-filters__results .row\').append(html);
}
} else {
var html = "<div>Sorry, there are no suitable tests here.</div>";
aft.find(\'#filterResults\').append(html);
}
}
});
});
如果我没有解释我实际上想做得很好,这里有一张成品的图片
SO网友:MikeNGarrett
我无法测试所有内容,因为对某些标记和功能有一些依赖关系,但以下是我目前发现的内容。
将脚本包装为以下内容,而不是$ = jQuery;
. 这是a better way to handle possible conflicts.
(function($){
// your code here
})(jQuery);
虽然您将脚本排队的方式很有效,但最好提前注册它们并将它们排队到短代码中。您还需要将jQuery设置为的依赖项
ajax_filter_tests
. 类似这样:
function ajax_filter_tests_scripts() {
wp_register_script( \'ajax_filter_tests\', get_stylesheet_directory_uri() . \'/src/js/components/_filter.js\', array(\'jquery\'), \'1.0\', true );
wp_localize_script( \'ajax_filter_tests\', \'ajax_url\', admin_url( \'admin-ajax.php\' ) );
}
add_action(\'wp_enqueue_scripts\', \'ajax_filter_tests_scripts\');
function ajax_filter_tests_shortcode() {
wp_enqueue_script( \'ajax_filter_tests\' );
// ...the rest of your code
}
您还需要检查以确保您正在呼叫
$.ajax
根据您使用的jQuery版本正确。从文档中:
弃用通知:jqXHR。success(),jqXHR。error()和jqXHR。从jQuery 3.0开始,complete()回调被删除。您可以使用jqXHR。done(),jqXHR。fail()和jqXHR。而是始终()。
var jqxhr = $.ajax({
url : ajax_url,
data : data
}).done(function() {
alert( "success" );
}).fail(function() {
alert( "error" );
}).always(function() {
alert( "complete" );
});
这将确保您的脚本始终处于启动状态,无论ajax响应是什么。这里可能还有其他问题,例如使用
the_permalink()
而不是
get_permalink()
, 但这会给你一个好的开始。
最后,问题可能是php而不是javascript。确保打开“调试”并进行检查,以确保其余代码没有出现错误。