带有复选框的Woocommerce Ajax过滤器

Question

我有这样的结构

品牌

1. 谷歌
2. 苹果
3. 微软

材料

1. 木材
2. 金属
3. PLASTİK

基本上是品牌＆amp;材料 - 是Woocomerce属性，其余是变量。

我现在正在研究ajax过滤器，我需要网址看起来像这样

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

});