将AJAX帖子筛选的下拉选择框改为按钮组的实现求助

问题根源 #

原代码依赖jQuery('#cat').val()获取Select下拉框的选中值，但替换为div按钮组后：

1. div元素没有val()方法，导致AJAX请求里的pcat参数无法正确获取选中分类ID
2. div不支持onchange事件，原绑定的触发逻辑失效

分步修复方案 #

1. 修改按钮组HTML结构 #

添加隐藏input存储选中分类ID，给按钮绑定点击逻辑并处理选中状态：

<form action="/" method="get" autocomplete="off" id="product_search">
    <input type="text" name="s" placeholder="Search Knowledge Hub" id="keyword" class="input_search" onkeyup="fetch()">
    <!-- 新增隐藏input，用于存储当前选中的分类ID -->
    <input type="hidden" id="selected_cat" value="">
    <div class="c-button-group">
        <!-- 默认选中"全部分类"，添加active类 -->
        <button type="button" class="c-button active" data-value="">All Categories</button>
        <?php
        $terms = get_terms(array(
            'post_type' => 'cpt_knowledge',
            'taxonomy'   => 'category',
            'hide_empty' => true,
        ));

        foreach ($terms as $term) {
            echo '<button type="button" class="c-button" data-value="' . $term->term_id . '"> ' . $term->name . ' </button>';
        }
        ?>
    </div>
</form>

2. 更新AJAX JavaScript代码 #

替换原触发逻辑，通过按钮点击事件更新选中值并发起请求：

add_action('wp_footer', 'ajax_fetch');
function ajax_fetch() { ?>
<script type="text/javascript">
    // 页面加载完成后绑定按钮点击事件
    jQuery(document).ready(function(){
        jQuery('.c-button-group .c-button').click(function(){
            // 移除所有按钮的选中状态
            jQuery('.c-button-group .c-button').removeClass('active');
            // 标记当前按钮为选中状态
            jQuery(this).addClass('active');
            // 更新隐藏input的选中值
            jQuery('#selected_cat').val(jQuery(this).data('value'));
            // 触发筛选请求
            fetch();
        });
    });

    function fetch() {
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: {
                action: 'data_fetch',
                keyword: jQuery('#keyword').val(),
                // 从隐藏input获取选中的分类ID
                pcat: jQuery('#selected_cat').val()
            },
            success: function(data) {
                jQuery('#datafetch').html(data);
            },
            // 可选：添加错误调试
            error: function(xhr, status, error) {
                console.log('AJAX请求错误:', error);
            }
        });
    }
</script>
<?php }

3. 后端PHP代码（可选调试） #

如果仍有问题，可以在后端添加日志调试参数接收情况：

add_action('wp_ajax_data_fetch', 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch');
function data_fetch() {
    // 调试：将接收的参数写入日志，可在wp-content/debug.log查看
    // error_log('筛选参数: ' . print_r($_POST, true));
    
    if ($_POST['pcat']) {
        $product_cat_id = array(esc_attr($_POST['pcat']));
    } else {
        $terms = get_terms('category');
        $product_cat_id = wp_list_pluck($terms, 'term_id');
    }
    $the_query = new WP_Query(array(
        'posts_per_page' => -1, 
        's' => esc_attr($_POST['keyword']), 
        'post_type' => array('cpt_knowledge'), 
        'tax_query' => array(
            array(
                'taxonomy' => 'category', 
                'field' => 'term_id', 
                'terms' => $product_cat_id, 
                'operator' => 'IN',
            )
        )
    ));
    if ($the_query->have_posts()):
        while ($the_query->have_posts()):
            $the_query->the_post(); ?>
            <?php knowledge::render(); ?>
    <?php
        endwhile;
        wp_reset_postdata();
    endif;
    die();
}

关键修改说明 #

• 用隐藏input替代Select的val()方法，统一分类ID的存储和获取逻辑
• 给按钮绑定click事件（div不支持onchange），触发时更新选中状态和筛选请求
• 新增active类标记当前选中的分类，提升用户体验

内容的提问来源于stack exchange，提问作者Paddy Winsley