分組和存儲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