使用jQuery过滤具有某些类的元素

时间:2017-11-22 21:19:49

标签: jquery html checkbox

我会尝试尽可能清楚地说明这一点,这样我就不会让任何人感到困惑。我试图做的是,我有一组div,都是以display: none开头的。每个div都有一组不同的类,除了它们都将共享class="card",并且一些div将共享相同的类。例如:

<div class="card simple rough arcuate">

</div>

<div class="card simple smooth needle">

</div>

所以我想要做的是,使用,当选中一个带有相应类别的复选框时,会显示卡片,如果一个与其中一个类别不对应的复选框,则会消失。检查。因此,如果选中带有"simple"复选框的复选框,则会同时显示,如果单击"rough"的复选框,则第二个消失。这是我迄今为止所尝试过的。

$('#simple').change(function() {
   if ($('.card').hasClass('simple') && $('#simple').prop("checked")) {
    $('.card').show() 
  } else {
    $('.card').hide()
  }
});

$('#arcuate').change(function() {
  if ($('.card').hasClass('arcuate') && $('#arcuate').prop("checked")) {
    $('.card').show()
  } else {
   $('.card').hide()
  }
});

为了后人的缘故,这里有一些复选框:

<label><input id="simple" type="checkbox"/>Simple</label>
<label id="arcuate"><input type="checkbox"/>Arcuate</label>
<label id="rough"><input type="checkbox"/>Rough</label>
<label id="smooth"><input type="checkbox"/>Smooth</label>

2 个答案:

答案 0 :(得分:0)

有许多不同的方法可以实现这一目标。您可以使用jQuery的filter方法

$('.card').hide().filter('.'+your_class).show();

如果是siblings

$('.card').filter('.'+your_class).show().siblings().hide();

答案 1 :(得分:0)

类选择器是.myclass点,ID为#myid。使用该类作为示例。简化一点。

在这个例子中,我添加了一个数据属性并查询要显示的类。 现在,您只需添加更多输入和/或div,无需更改代码即可显示已检查的内容。请注意,我挂钩了一个带有id的div,只需选择那些,设置值可见的值。

不需要在这里保留一堆id。

$('.card').toggle(false);// initial hide
$('#toggles').on('change','input[type="checkbox"]',function(event) {
    var checks = $(event.delegateTarget).find('input[type="checkbox"]')
    checks
    .filter(':checked')
    .each(function(){
        var targets = $(this).data("target");
        $('.card.'+targets).show();
    });
    checks
    .filter(":not(:checked)")
    .each(function(){
         var targets = $(this).data("target");
         $('.card.'+targets).hide();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="toggles">
    <label><input type="checkbox" data-target="simple" />Simple</label>
    <label><input type="checkbox" data-target="arcuate"/>Arcuate</label>
    <label><input type="checkbox" data-target="rough"  />Rough</label>
    <label><input type="checkbox" data-target="smooth" />Smooth</label>
    <label><input type="checkbox" data-target="needle" />Needle</label>
</div>
<div class="card simple rough arcuate">simple rough arcuate</div>
<div class="card simple smooth needle">simple smooth needle</div>
<div class="card simple needle">simple needle</div>
<div class="card simple rough">simple rough</div>