使用jQuery或JS从现有的值集过滤结果 [英] Filter result using jquery or JS from an existing value set

问题描述

我一直在为在我的页面上返回的数组尝试创建过滤器，并试图这一段时间，我有这个线程完全相同的问题：使用jQuery过滤复选框

为什么上面的线程没有帮助：主要原因是在JS和jQuery不是很好，所以很难理解第二种方法（接受的答案）和第一个工作效果

到目前为止，我做了什么：通过对此主题的帮助如何使用复选框动态地过滤内容？ - jQuery的我已经创建了一个过滤器（我dint以前知道:)），但仍然无法按预期过滤.... 小提琴在这里

 <！ -  HTML过滤器chkboxes  - > 
< input type =checkboxid =wmclass =a/> WM 
< input type =checkboxid =tvclass =a/> ; tv 
< input type =checkboxid =acclass =a/> ac 
  
 
<！ - 要被破坏的值 - > 
< div class =wm> WM< / div> 
< div class =tv>电视< / div> 
< div class =ac> ac< / div> 
< div class =terrace>阳台< / div> 
< div class =wm tv> WM TV< / div> 
< div class =wm tv ac> wm tv ac< / div> 
< div class =wm terrace> wm terrace< / div> 
< div class =tv>电视< / div> 
< div class =tv ac> tv ac< / div> 
  

JS：
（$。$$）。$（$。 + this.id）.toggle（this.checked）;
））。change（）;
}）;

/ strong>虽然我已经提到它在小提琴，但为了快速读者.....我可以隐藏未经检查的筛选器值，但他们消失，即使他们有一些类其筛选器已被检查为像< div class =wm tv> WM TV< / div>


我不希望ajax或一些火箭科学的jQuery来排除这个问题....寻找一些简单的解决方案，考虑noob问它：）

解决方案

解决方案是在您发布的第一个链接：

隐藏所有元素，然后遍历复选框，并为每个
选中一个.show（）元素与关联的类别。

  $（document）.ready（function（）{
 $（。a）。change（function（）{
 $（'div'）。hide（）; // hide所有元素
 $（'：checkbox：checked'） .each（function（）{//循环检查复选框
 $（。+ this.id）.show（）; // show 
}）; 
}）; 
}）; 
  

JSFiddle Demo

I have been trying create filters for the array returned on my page and have been trying this for a while and i have exactly same problem as this thread : Filtering with checkboxes using jQuery

Why the above thread was not helpful : main reason is m not very good in JS and jQuery, so had difficulty in understanding the 2nd method (of the accepted answer) and first one dint worked

What i have done so far : Going by the help on this thread How to dynamically filter content using checkboxes? - jQuery i have created a filter (which i dint knew previously :) ) but still not able to filter as expected.... Fiddle Here

HTML :

<!-- HTML filter chkboxes -->
<input type="checkbox" id="wm" class="a" />WM
<input type="checkbox" id="tv" class="a" />tv
<input type="checkbox" id="ac" class="a" />ac
<input type="checkbox" id="terrace" class="a" />terrace


<!-- Values to be filetered -->
<div class="wm">WM</div>
<div class="tv">TV</div>
<div class="ac">ac</div>
<div class="terrace">terrace</div>
<div class="wm tv">WM TV</div>
<div class="wm tv ac">wm tv ac</div>
<div class="wm terrace">wm terrace</div>
<div class="tv">tv</div>
<div class="tv ac">tv ac</div>

JS :

$(document).ready(function () {
    $(".a").change(function () {
        $("." + this.id).toggle(this.checked);
    }).change();
});

What was your problem again????: though i have mentioned it in fiddle but for quick reader..... i am able to hide the unchecked filter values, but they disappear even if they have some class whose filter has been checked to view like <div class="wm tv">WM TV</div>

I don't want ajax or some rocket-science jQuery to sort this out....looking for some simple solution considering a noob asked it :)

解决方案

The solution is in the first link you posted:

Hide all elements, then loop through the checkboxes and for each checked one .show() the elements with the associated category.

 $(document).ready(function () {
    $(".a").change(function () {
        $('div').hide(); //hide all elements
        $(':checkbox:checked').each(function() { //loop through checked checkboxes
            $("." + this.id).show(); //show
        });
    });
}); 

JSFiddle Demo

这篇关于使用jQuery或JS从现有的值集过滤结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！