javascript - 带有复选框的 Woocommerce Ajax 过滤器

Question

我有这样的结构

品牌

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

Material

1. 木头
2. 金属
3. 塑料

基本上品牌和 Material - 是 Wocomerce 属性，其余的是变量。

我现在正在研究 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);

});