Question

我正在尝试通过选中复选框来更改div的属性值。我试图通过将复选框值传递给函数来制作某种过滤器并过滤掉div。复选框会在div内动态添加，标识为browse_options。

<div subcategory='1'></div>
<div subcategory='2'></div>
<div subcategory='3'></div>

<input class="filter_checkbox" type="checkbox" value="1">
<input class="filter_checkbox" type="checkbox" value="2">
<input class="filter_checkbox" type="checkbox" value="3">

我的jQuery代码，基本上我正在尝试循环输入然后div但我现在无法让它工作几个小时所以我被卡住了，任何帮助都会受到赞赏。

$('#browse_options').on("change", ".filter_checkbox", function(){
  $('.filter_checkbox').each(function (index, checkbox){
    if($(checkbox).prop('checked')){
      $('div#results>div.item.filter').each(function (index, card){
        if($(checkbox).attr('value') != $(card).attr('subcategory')){
          $(card).removeAttr('style');
          $(card).css('display','none');
        } else {
          $(card).removeAttr('style');
          $(card).addClass('filter2');
        }
      });
    }
  });
});

Answer 1

关于jQuery的一个好处是隐式循环。集合上的大多数.each操作都可以使用选择器或过滤来完成。而不是写

$('.filter_checkbox').each(function (index, checkbox){
            if($(checkbox).prop('checked')){ /* do stuff */ }
});

你可以写

$('.filter_checkobx:checked').each( function(index, checkbox){ /* do stuff */ })

所以你只能使用选中的输入。

要获得subcategory属性等于输入value属性的div，您只需使用

$('div[subcategory=' + checkbox.val() +']');

或全部获取并按属性值

过滤

$('div[subcategory]').filter( function(index, category){
    return $(category).attr('subcategory') == checkbox.val();
});

我已使用上述原则（以及更多原则）重新创建了代码，其中包含demo on jsfiddle，此处是注释版本：

$('#browse_options').on("change", ".filter_checkbox", function(){
    // get the subcategory divs to use later, 
    var categories = $('div[subcategory]'); 
    // make a list of the values of checked checkboxes.
    var selected_values = $('.filter_checkbox:checked').toArray().map( function( checkbox ){
       return checkbox.value; 
    });

    categories
         // remove style and hide all the divs
        .removeAttr('style')
        .hide()
         // find the divs with subcategory attribute in the list of selected values
        .filter( function( index, cat ){
             return selected_values.indexOf( $(cat).attr('subcategory') ) > -1;
        })
        // now show the divs in filtered collection
        .show();
});

通过传递复选框值属性jQuery来影响DOM元素

1 个答案: