问对html 'data‘属性进行分组和存储
EN

Stack Overflow用户

提问于 2016-09-14 18:18:25

回答 1查看 392关注 0票数 1

我正在为WordPress中的自定义post类型构建一个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>

因此，当用户单击一个标记时，我使用以下代码将类'selected‘应用于该标记：

(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函数选择所有已被“选中”的锚标签。最终，我想创建一个数组，通过它们各自的'data-group‘对所有’data-filter‘进行分组，我知道这涉及到循环

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

但是我想不通，任何帮助都将不胜感激。

javascript

jquery

回答 1

Stack Overflow用户

发布于 2016-09-14 20:28:08

您非常接近，只需在data-group属性上对您的值进行分组。我已经更改了您的build_filter函数。请检查，如果有任何问题，请让我知道。

$(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);
});

<!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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39487956

复制

相似问题

问对html 'data‘属性进行分组和存储
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对html 'data‘属性进行分组和存储EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对html 'data‘属性进行分组和存储
EN