Woocommerce阿賈克斯濾波器，具有複選框

Question

我有結構這樣

品牌

1. 谷歌
2. 蘋果
3. 微軟

材料

1. 木
2. 金屬
3. PLASTİK

基本上品牌&材料 - 是Woocomerce屬性，其餘的變量。

我現在的工作對AJAX的過濾器，我需要的URL看起來像這樣

http://example.com/shop?filter_brand=122,123&filter_material=134,45。

這裏，我有什麼到目前爲止，這code

HTML

<ul class="dd" data-termik="men"> 
    <li> 
     <label for="">Men</label> 
     <input class="ajax-checkbox" data-term="men" data-id="31" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Boys</label> 
     <input class="ajax-checkbox" data-term="men" data-id="54" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Robots</label> 
     <input class="ajax-checkbox" data-term="men" data-id="76" type="checkbox"> 
    </li> 
</ul> 

<hr> 

<ul class="dd" data-termik="women"> 
    <li> 
     <label for="">Women</label> 
     <input class="ajax-checkbox" data-term="women" data-id="12" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Girls</label> 
     <input class="ajax-checkbox" data-term="women" data-id="38" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Barbies</label> 
     <input class="ajax-checkbox" data-term="women" data-id="19" type="checkbox"> 
    </li> 
</ul> 

JS

$(document).on('change', '.ajax-checkbox', function(e) { 

    var str = $(".ajax-checkbox:checked").map(function() { 
     var term = $(this).data('term'); 

     var term_ids = []; 
     $('.ajax-checkbox:checked').each(function(index, value) { 
      var term_id = $(this).data('id'); 
      term_ids.push(term_id); 
     }); 
     term_ids_unique = $.unique(term_ids); 

     return term + '=' + term_ids_unique; 

    }).get(); 

    var uniqueArray = str.filter(function(elem, pos) { 
     return str.indexOf(elem) == pos; 
    }); 


    // FINAL URL 
    var final_url = uniqueArray; 
    console.log(final_url); 

}); 

，但它不工作正確的。

Answer 1

終於搞定了。 DEMO

JS

$(document).on('change', '.ajax-checkbox', function(e) { 
    var final_url = '', uniqueArray, selected = {}; 
    $('.ajax-checkbox:checked').each(function(index,value) { 
    var data = $(this).data(); 
    if (typeof selected[data.term] === "undefined") { 
     selected[data.term] = []; 
    } 
    selected[data['term']].push(data.id); 
    }); 
    for (prop in selected) { 
    if (final_url) { 
     final_url += '&'; 
    } 
    final_url += prop + '='; 
    final_url += selected[prop].join(','); 
    } 

    console.log(final_url); 

});