javascript - 处理在 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*/ 
})();