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

$('#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（）函数，但这可以让您大致了解如何执行您所要求的操作。

Answer 2

您可以在要隐藏的<p>上添加课程，然后将toggle用于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();
      }
    );

如何使用复选框过滤内容？ - jQuery

2 个答案: