Как фильтровать контент с помощью флажков?- JQuery

Question

Я пытаюсь выяснить, как фильтровать содержимое с помощью флажков с помощью jquery.Будучи новичком в jquery, я понятия не имею, как правильно подойти к этому.

Мне бы хотелось три флажка, подобных этому:

<div class="check_filter">
    <div id="filter">
        <input type="checkbox" id="apple" /><label for="apple">Apple</label>
        <input type="checkbox" id="pear" /><label for="pear">Pear</label>
        <input type="checkbox" id="peach" /><label for="peach">Peach</label>
    </div> 
</div>

Тогда у меня был бы контент, который можно отфильтровать:

<div id="content" >
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
     <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>  
     <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>  
     <p>Pellentesque ac sem ac sem tincidunt euismod.</p>  
     <p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p>  
     <p>Nullam in nisi sit amet velit placerat laoreet.</p>  
     <p>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</p>
</div>

Мне интересно, как лучше отфильтровать данные, когда флажок установлен или снят.

Спасибо за любую помощь по этому вопросу.

Answer 1

Вы можете поместить классы на <p> s, которые хотите скрыть, и затем использовать , переключая на show и hide их:

HTML:

<div id="content" >
     <p class="apple">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
     <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>  
     <p class="pear">Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>  
     <p class="apple peach">Pellentesque ac sem ac sem tincidunt euismod.</p>  
     <p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p>  
     <p>Nullam in nisi sit amet velit placerat laoreet.</p>  
     <p>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</p>
</div>

JQuery:

$("#apple").toggle(
      function () {
        $('.apple').hide();
      },
      function () {
        $('.apple').show();
      }
    );

Answer 2

$('#apple').change(function(){
   var checked = $(this).is(":checked");
   if( checked )
   {
      filterContentForApple();
   }  
});

а потом что-то вроде ...

function filterContentForApple()
{
   $('#content p').each(function(){
      if( $(this).is(":contains('apple')" )//or some other condition
      {
         $(this).hide();
      }
      else{
         $(this).show();
      }
   })
}

Конечно, вы всегда можете сделать функцию filter (), которая принимает предикат функции в качестве аргумента, но это должно дать вам общее представление о том, как сделать то, что вы запрашиваете.