如何通过隐藏/显示具有动态属性的 div 进行过滤？

Question

假设我有复选框 x、y、z 和 <div> 元素以及对应的 id 属性。

我有 x、y、z 组中的产品，并且这些组有类。但是clearfix 类适用于不同位置的所有产品（因为我循环浏览产品）所以我应该认识到 id 和其他东西的区别。

如果选中了一个复选框，它应该显示相关的 div（如果是x，则显示<div id='x'>）。如果不是，则不应显示它们。如果 x 和 y 被选中，则显示 x、y 并隐藏 z。

所以它应该与多个一起工作。这是导致问题的我的 div 和 clearfix 样式：

.clearfix:after { 
    clear: both;
}
.clearfix { 
    zoom: 1; 
    display: block;
}
.clearfix:after{
    display: block; 
    content: ".";
    clear: both;
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow:hidden;
}

<div class="reltitles" id="<?php echo $array[$key][0]; ?>" style="<?php if($array[$key][1]==0){?> display:none;<?php }else {?>display:block;<?php }?>">
    <font class="resultHeader">
         (<?php echo $array[$key][1];?>) <?php  echo $array[$key][0]; ?>
    </font> 
</div>
<div class="clearfix" value="<?php echo $array[$key][0];?>" name="<?php echo $array[$key][0];?>" id="<?php echo $array[$key][0];?>">
    <?php //code for showing items

以下是未能隐藏明确修复的脚本：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function () {
        var variable = $(this);
        $(".clearfix").each(function () {
            if( $(this).attr("value") != variable.val() ) {
                var id = $(this).attr("value");
                var x = document.getElementById(id);
                if ( x.style.display == "block" ) { 
                    x.style.display = "none";
                } else {
                    x.style.display = "block";
                }
                $(this).hide();
            }
        });
    });
});

第一次应该显示所有项目，然后如果用户绑定以过滤它们，则开始操作。

Answer 1

为什么不将以下属性添加到您的复选框 data-target='div#'
然后为您的 div ID 分配相同的值。

然后用js：

$(document).on('click', '.checkboxs', function() {
var t = $(this).attr('data-target');
if(t != undefined) {
    //check if its already shown, if so hide!
    if($(this).attr('data-isshown')) {
        $("#"+t).hide();
        $(this).removeAttr('data-isshown')
    } else {
        $("#"+t).show();
        $(this).attr("data-isshown", true);
    }
  } 
});

Answer 2

我终于弄明白了，我遍历了所有的复选框和所有的 div

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $('input[type="checkbox"]').click(function(){
            var numberOfChecked = $('input:checkbox:checked').length;
            $(".clearfix").each(function(){
                var clear=$(this);
             $('input[type="checkbox"]').each(function(){
                 var variable=$(this);
                var flag=$(this).prop('checked');
                var id=$(this).val();

                if(flag)
                 {

                    if(clear.attr("value")==variable.val())
                   {
                        var id=clear.attr("value");
                        var x=document.getElementById(id);
                        x.style.display="block";
                        clear.css('display','block');

                    }

                        }
                else  if(clear.attr("value")==variable.val())
                {   var id=clear.attr("value");
                    var x=document.getElementById(id);
                    x.style.display="none";
                    clear.css('display','none');

                }
                if(!numberOfChecked)
                {
                    var id=clear.attr("value");
                    var x=document.getElementById(id);
                    x.style.display="block";
                    clear.css('display','block');
                    }
             });    //clear
        });//all checkboxes
    }); //click  
         });//ready

Answer 3

如果我误解了您的问题，请原谅我，但您可以使用通用兄弟组合器单独使用 CSS 完成此操作：

<input type="checkbox" class="box_a" />
<input type="checkbox" class="box_b" />

<div class="box" id="a">This is a box.</div>
<div class="box" id="b">This is b box.</div>

.box {
    display: none;
}

.box_a:checked ~ #a,
.box_b:checked ~ #b {
    display: block;
}

演示：http://jsfiddle.net/jonathansampson/dXKLL/

如果您无法控制 id 值，则可以将连接基于nth-of-type：

.check:nth-of-type(1):checked ~ .box:nth-of-type(1),
.check:nth-of-type(2):checked ~ .box:nth-of-type(2) {
    display: block;
}

演示：http://jsfiddle.net/jonathansampson/dXKLL/1/

如果您需要在未选中任何复选框时所有内容都可见，则可以同时使用下一个兄弟选择器和通用兄弟选择器：

.check:not(:checked) + .check:not(:checked) ~ .box {
    display: block;
}

这将显示在至少两个未选中的.check 元素之后的所有.box 元素。

演示：http://jsfiddle.net/jonathansampson/dXKLL/2/