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

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

您非常接近只需在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>

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

问题描述

1 个解决方案

解决方案1
0 2016-09-14 12:28:08

分组和存储html&#39;数据&#39;属性

问题描述

1 个解决方案

解决方案1 0 2016-09-14 12:28:08

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

解决方案1
0 2016-09-14 12:28:08