AJAX 过滤帖子。将选择选项更改为按钮组答案

【问题标题】：AJAX Filter Posts. Changing select options to button groupAJAX 过滤帖子。将选择选项更改为按钮组
【发布时间】：2022-12-06 20:52:37
【问题描述】：

我正在尝试按类别搜索和过滤帖子，并使用以下代码使其正常工作。

但是我不想使用选择下拉菜单，而是想将其更改为按钮组。

当前工作代码

<form action="/" method="get" autocomplete="off" id="product_search">
<input type="text" name="s" placeholder="Search Knowedge Hub" id="keyword" class="input_search" onkeyup="fetch()">
<select name="cat" id="cat" onchange="fetch()">
    <option value="">All Categories</option>
    <?php
    $terms = get_terms(array(
        'post_type' => 'cpt_knowledge',
        'taxonomy'   => 'category',
        'hide_empty' => true,
    ));

    foreach ($terms as $term) {
        echo '<option value="' . $term->term_id . '"> ' . $term->name . ' </option>';
    }
    ?>
</select>

阿贾克斯调用

function fetch() {

jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: {
        action: 'data_fetch',
        keyword: jQuery('#keyword').val(),
        pcat: jQuery('#cat').val()
    },
    success: function(data) {
        jQuery('#datafetch').html(data);
    }
});

}

我想我需要使用类似于下面的东西，但需要将 ajax 调用 pcat: jQuery('#cat').val() 更改为 onclick 或类似的东西。

<div class="c-button-group" name="cat" id="cat" onchange="fetch()">
<button value="">All Categories</button>
    <?php

    // Product category Loop

    $terms = get_terms(array(
        'post_type' => 'cpt_knowledge',
        'taxonomy'   => 'category',
        'hide_empty' => true,
    ));

    // Loop through all category with a foreach loop
    foreach ($terms as $term) {
        echo '<button class="c-button" value="' . $term->term_id . '"> ' . $term->name . ' </button>';
    }
    ?>

有人可以帮忙吗？

【问题讨论】：

标签： jquery ajax wordpress

【解决方案1】：

如果你试试这个 HTML 代码..？

<div class="c-button-group" name="cat" id="cat">
<button value="" onclick="fetch()">All Categories</button>
    <?php

    // Product category Loop

    $terms = get_terms(array(
        'post_type' => 'cpt_knowledge',
        'taxonomy'   => 'category',
        'hide_empty' => true,
    ));

    // Loop through all category with a foreach loop
    foreach ($terms as $term) {
        echo '<button class="c-button" onclick="fetch()" value="' . $term->term_id . '"> ' . $term->name . ' </button>';
    }
    ?>

使用此 JQuery 代码...？

<script>
function fetch() {

jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: {
        action: 'data_fetch',
        keyword: jQuery('#keyword').val(),
        pcat: jQuery($this).val()

        /*
        pcat.val() est rempli avec "$term->term_id"
        */
    },
    success: function(data) {
        jQuery('#datafetch').html(data);
    }
});

}
</script>

“Onclick”在按钮上而不是在选择选项上。和检索到的值（在“pcat“变量）使用”$(这个)" 进行不链接到名称但链接到单击元素的检索

【讨论】：