使用jquery进行客户端过滤 [英] Client side filtering using jquery

问题描述

因此 http://jsfiddle.net/1auhde3L/无效的小提琴是基于这个小提琴 http://jsfiddle.net/B9Hnu/125/确实可以，但是没有.不要考虑如何使用数据类别以及复选框的rel或ID标记中的标记来设置我的html.

So this fiddle which doesn't work http://jsfiddle.net/1auhde3L/ is based on this fiddle http://jsfiddle.net/B9Hnu/125/ which does work, but it doesn't take into account how my html is set out using data-category and the tags in the rel or ID tags of the checkboxes.

这是jquery ...

here's the jquery...

$(function() {

var $checkboxes = $("input[id^='type-']");
$('input[type=checkbox]:checked').attr('checked', false);

$checkboxes.change(function() {
    console.log($('input[type=checkbox]:checked').length);
    if( $('input[type=checkbox]:checked'
         ).length>0)
{
    var selector = '';
    $checkboxes.filter(':checked').each(function() { // checked 
        //selector += '.' + this.id.replace('type-', '') + ', ';
        selector += "[data-category~='" + element.id + "']";                  
        // builds a selector like '.A, .B, .C, ' 
    });
    selector = selector.substring(0, selector.length - 2); // remove trailing ', '
    $('.results > div').hide() // hide all rows
    .filter(selector).show(); // reduce set to matched and show
}else

{
 $('.results > div').show()    
}
 });

});

推荐答案

我相信这就是您寻找的东西.

您的代码中存在一些问题:

There were a few issues in your code:

1. 您正在寻找$("input[id^='type-']");，但是问题是您的ID不是以"type-"开头
2. 我修改了代码，还添加了第二个选择器，否则由于选中复选框的顺序而不会显示元素.例如，如果您单击电子邮件然后进行品牌标记，则您的选择器将具有字符串电子邮件品牌标记，并且不会选择具有品牌电子邮件"数据类别的div.您可能要考虑的另一种方法是创建一个数组，然后使用该数组进行过滤.

1. You are looking for $("input[id^='type-']"); but the problem is that your id's don't start with "type-"
2. I modified your code to also add a second selector otherwise you would not show elements because of the order in which the check box was selected. For instance - if you click email and then branding - your selector will have the string email branding and it will not select the div with the data-category of "branding email". The other way you might want to consider is to create an array and use that to filter instead.

祝您编程愉快！

更新

我更新了代码以使用数组而不是字符串.这将允许您基于各个字符串进行过滤.它还消除了单击复选框的顺序，并且消除了对两个选择器字符串的需要.

I updated the code to use an array instead of a string. This will allow you to filter based on the individual strings. It also eliminates the order in which your checkboxes are clicked and it eliminates the needs for two selector strings.

这篇关于使用jquery进行客户端过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！