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＃'
然后为你的divs 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

如果我误解了你的问题，请原谅我，但你可以使用一般兄弟组合器单独用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;
}

这将显示至少有两个未经检查的.box元素后面的所有.check元素。

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

Answer 3

最后我想通了，我循环遍历所有复选框和所有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

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

3 个答案: