Question

我有两个带有filterTag类的单独的div，它们使用数据过滤器定位内部的复选框。我正在尝试将复选框值放入所需的list1或list2区域。

我需要我的数组与data-filter元素分开运行，因此我们有两个明确的列表，可以根据复选框的值将哪些数据推入所需的list1或list2 div中。

由于模板的加载方式，我需要使用data-filter元素，我无法自定义filterTag容器中的内容。

请帮助，我超级亲密，但被卡住了。

$(document).on('change', '.filterTag .ais-refinement-list__checkbox', function() {
  getValueUsingParentTag();
});


function getValueUsingParentTag() {

  var chkArray = [];

  $('.filterTag .ais-refinement-list__checkbox:checked').each(function() {
    var target2 = $(this).parentsUntil('.filterTag').parent().data('filter');
    chkArray.push($(this).val());
    return this.value;
  });

  var selected;
  selected = chkArray.join(', ');

  if (selected.length > 0) {

    console.log(selected);
  }
}

这是我的jsfiddle

Answer 1

为了获得结果，您可以简单地重写循环：

function getValueUsingParentTag() {
    $('[id^="list"]').empty(); // empty divs
    $('.filterTag .ais-refinement-list__checkbox:checked').each(function(idx, ele) {
        var target2 = $(this).closest('.filterTag').data('filter');
        $(target2).html(function(idx, html) { // append to the right div....
            return html.length == 0 ? ele.value : html + ', ' + ele.value;
        });
    });
}

$(document).on('change', '.filterTag .ais-refinement-list__checkbox', function() {
    getValueUsingParentTag();
});


function getValueUsingParentTag() {
    $('[id^="list"]').empty(); // empty divs
    $('.filterTag .ais-refinement-list__checkbox:checked').each(function(idx, ele) {
        var target2 = $(this).closest('.filterTag').data('filter');
        $(target2).html(function(idx, html) {
            return html.length == 0 ? ele.value : html + ', ' + ele.value;
        });
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>List 1</h2>
<div class="filterTag ais-refinement-list" id="uniqueID1" data-filter="#list1">
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Small">
            <span>Small</span></label>
    </div>
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Medium">
            <span>Medium</span></label>
    </div>
</div>
<div id="list1"></div>
<h2>List 2</h2>
<div class="filterTag ais-refinement-list" id="uniqueID2" data-filter="#list2">
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Alloy">
            <span>Alloy</span></label>
    </div>
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Carbon">
            <span>Carbon</span></label>
    </div>
</div>
<div id="list2"></div>

jQuery复选框数组值通过data属性放置到唯一div中

1 个答案: