处理在 Ajax 中更改的多个数据/参数 - Wordpress

Question

我正在尝试使用 ajax 过滤称为播客的自定义帖子类型，使用两个自定义分类 id 作为参数、流派和国家/地区。

这是前端：https://imgur.com/a/G2vB62q。

如您所见，我可以选择一个流派或/和一个国家/地区作为我的帖子的过滤器（下面有一个包含传递参数的数组）。

在我的播客页面中，我有两个 foreach，其中带有链接，带有名称和 term_id。

foreach ($genre/$country as $category) {
    echo '<a class="button-prova/button-prova2 premuto2"
    name="keyword/keyword2" id="keyword/keyword2" 
     value="'.$category->term_id.'" 
     href="#">'.$category->name.'</a>';   
} 

然后，在 function.php 中，我有我的 ajax 函数和 ajax-fetch。

$( document ).ready(function() {
    $(document).on("click touchend", ".premuto, .premuto2", function () {
    fetch(this);
    });
});
function fetch(prova){
    if($(prova).attr('name') == 'keyword'){
        var1 = $(prova).attr('value') ? jQuery(prova).attr('value') : 0;
    } else
          {
             var2 = $(prova).attr('value') ? jQuery(prova).attr('value') : 0;
          }
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'data_fetch', keyword: [var1,var2] },
        success: function(data) {
            jQuery('#datafetch').html( data );
        }
    });
}

首先，当我选择一种类型时，国家/地区设置为 0，正如您在代码中看到的那样。但是当我选择其他分类时，类型设置为 0（反之亦然，如图所示）。有办法存储我的上一个选择吗？

Answer 1

由于您使用 AJAX。如果您在函数之外声明变量，则先前选择的值将保持不变。试试这个。

var keywords = {};//Put this line outside of the function, so it available globally
$(document).ready(function() {
    $('.premuto, .premuto2').on("click", function () {
        keywords[$(this).attr('name')] = $(this).attr('value');
        fetch();
    });
});

function fetch(){
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { 'action': 'data_fetch', 'keywords': keywords },
        success: function(data) {            
        }
    });
}

关键字变量将如下所示：

{keyword:0,keyword2:4}

它会在 PHP 端被读取为关联数组。

补充说明： 使用 javascript 全局变量可能会导致其他脚本/插件中的变量名称发生冲突。为了解决这个问题，您可以将所有脚本封装在一个自调用函数中，如下所示：

(function(){ 
    /*PUT YOUR PLUGIN SCRIPTS HERE*/ 
})();

Answer 2

您用于过滤的按钮在单击时具有特定的标记（可能是一个类）。您可以使用该类作为切换。在您的“获取”功能中，您可以执行以下操作：

keywords = Array();
$('.filters.toggle').each(function(){ // all filters with the toggle class
    // add those values to the keywords array
    keywords.push($(this).val()); // .val() is the same as attr('value')
});

keywords 将是所有类型、国家/地区的数组。

然后：

data: { action: 'data_fetch', keyword: keywords},