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

我正在为WordPress中的自定义后期类型构建ajax过滤器。我有类似的这种定位的标签列表：分组和存储HTML'数据'属性

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

的内容，但我不能让我的头周围，任何帮助将不胜感激

来源

2016-09-14 pricey_zeal

可你只有1个论坛已在其选择的时间？ – guradio

你是非常接近，只是你的价值组的数据组属性。我已经改变了你的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>

来源

2016-09-14 12:28:08 localhost

这太棒了 - 谢谢localhost：] –

不客气，我们在这里互相帮助。 :) – localhost

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

回答

相关问题