Question

我正在为WordPress中的自定义post-type构建一个ajax过滤器。我有一个类似于此的锚标签列表：

<a href="" class="selected" data-group="1" data-filter="filter-1">Filter 1</a>
<a href="" class="selected" data-group="1" data-filter="filter-2">Filter 2</a>
<a href="" class="selected" data-group="2" data-filter="filter-3">Filter 3</a>
<a href="" class="" data-group="2" data-filter="filter-4">Filter 4</a>
<a href="" class="selected" data-group="2" data-filter="filter-5">Filter 5</a>
<a href="" class="selected" data-group="2" data-filter="filter-6">Filter 6</a>

因此，当用户点击代码时，我会使用以下代码将“已选择”类应用于该代码：

(function($) {
    function build_filter() {
        f = $(".filter a.selected").map(function() {
            return $(this).data('filter');
        })
        .get()
        .join();
        return f;
    }

    $(document).on('click', '.filter a', function(event) {

        event.preventDefault();

        // toggle if selected
        $(this).toggleClass('selected');
        // get the filter(s)
        filter = build_filter();

        $.ajax({
            url: ajaxfilter.ajaxurl,
            type: 'post',
            data: {
                action: 'ajax_filter',
                filter: filter
            },
            success: function (html) {
                $('.product.gallery').empty();
                $('.product.gallery').append(html);
            }
        })
    })
})(jQuery);

然后我选择使用build_filter函数“选中”的所有锚标签。最后，我想创建一个数组，通过各自的'数据组'对所有'数据过滤器进行分组'我知道它涉及循环内容

$(".filter a.selected").map();

但是我无法理解它，任何帮助都会非常感激

Answer 1

您非常接近只需在数据组属性上创建值组。我已经改变了你的build_filter函数。请检查，如果有任何问题，请告诉我。

＆＃13;

$(document).ready(function(){
 (function($) {
  function build_filter() {
   var obj={};
   f = $(".filter a.selected").each(function() {
   obj[$(this).data('group')]=
         function(datagroup){
         var t=[];
          $(".filter a.selected").each(function() {
           if($(this).data('group')==datagroup)t.push($(this).data('filter'));
          });
          return t;
         }($(this).data('group'));
         
   
   });
   return obj;
  }
  $(document).on('click', '.filter a', function(event) {
  event.preventDefault();
  // toggle if selected
  //  $(this).toggleClass('selected');
  // get the filter(s)
   filter = build_filter();
console.log(filter);
   })
 })(jQuery);
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </head>
<body>
<span class="filter">
<a href="#" class="selected" data-group="1" data-filter="filter-1">Filter 1</a>
<a href="#" class="selected" data-group="1" data-filter="filter-2">Filter 2</a>
<a href="#" class="selected" data-group="2" data-filter="filter-3">Filter 3</a>
<a href="#" class="" data-group="2" data-filter="filter-4">Filter 4</a>
<a href="#" class="selected" data-group="2" data-filter="filter-5">Filter 5</a>
<a href="#" class="selected" data-group="2" data-filter="filter-6">Filter 6</a>
</span>
</body>
</html>

＆＃13;

分组和存储html'数据'属性

1 个答案: