如何通过隐藏/显示动态属性的divs过滤？ [英] how to filter by hiding/showing divs with dynamic attributes?

问题描述

假设我有复选框x，y，z和< div> 元素与相应的 id 属性。 / p>

我有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 =reltitlesid =<？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 =clearfixvalue =<？php echo $ array [$ key] [0];？> name =<？php echo $ array [$ key] [0];？> id =<？php echo $ array [$ key] [0];？>> 
<？php //用于显示项目的代码
  

隐藏清除修正：

  $（document）.ready（function（）{$ b $ （function（）{
 var variable = $（this）; 
 $（。clearfix）。 {
 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（）; 
} 
}）; 
}）; 
  

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

解决方案

最后我想出来，我循环遍历所有复选框和所有div

 < script type =text / javascriptsrc =http://code.jquery.com/jquery.js>< / script& 
< script type =text / javascript> 
 $（document）.ready（function（）{
 
 $（'input [type =checkbox]'）click（function（）{
 var numberOfChecked =每个（function（）{
 var clear = $（this）; 
 $（this）; $（'input：checkbox：checked'输入[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 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 
}）; //所有复选框
}）; // click 
}）; // ready 
  

Suppose I have checkboxes x, y, z and <div> elements with corresponding id attributes.

I have products in groups of x, y, z and the groups have classes. But the clearfix class is for all the products in different locations (because I loop through products) so I should recognize the difference with id and other things.

If a checkbox has been checked it should show the related div (if x, show <div id='x'>). If not it should not show them. If x, and y are checked, show x, y and hide z.

So it should work with multiple ones. Here are my divs and styles of clearfix that caused the problem:

.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

Following are the scripts that failed to hide the clear fix:

$(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();
            }
        });
    });
});

The first time it should show all of the items and then if user ties to filter them start the operation.

解决方案

finally I figured it out, I loop through all checkboxes and all divs

<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

这篇关于如何通过隐藏/显示动态属性的divs过滤？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！