Question

我编辑你的答案是正确的。这是整个代码。由于一些控制台错误，我将$更改为Jquery，我将在稍后清理代码。我也有cat_offlinee和cat_onlinee所以我做了一点改变，它适用于cat_1潜水但是然后有cat_1和cat_2它没有

<div class="cat_offlinee cat_1 some_class class_ect"> // WORKS
<div class="cat_offlinee cat_1 cat_2 some_class class_ect"> // DOESN'T WORK

在我改变之前，我删除了那些cat_offlinee和cat_onlinee，所有工作都很完美。所以现在它只用单个cat_（数字）类隐藏那些潜水

<div class="e_title">
<input type='checkbox' checked class='show_1' />
<input type='checkbox' checked class='show_2' />
</div>

    <script type="text/javascript"> 
        function filterItems(array) {
            return array.filter((el) =>
                el.toLowerCase().indexOf('cat_') > -1
            )
        }

        // to show only div with class category_1, other 
        var cls_1;
        jQuery(".cat_1").each(function(){
             cls_1 = jQuery(this).attr('class');
             cls_1 = cls_1.split(" ");
             if ( filterItems(cls_1).length == 1 ) jQuery(this).show();
        })

        jQuery(".e_title input[type='checkbox']").click(function() {
            var num = jQuery( this ).attr( 'class' ); // ex: show_1 
            num = num.slice( 5 ); //get text after '_', ex: 1

            if ( jQuery(this).is(":checked") ) {
              jQuery('.cat_'+num).show();
            }
            else {
              // ex: only div which hasClass category_1
              jQuery('.cat_'+num).each(function(){          
                var cls = jQuery(this).attr('class'); // ex: 'category_1 category_3'
                cls = cls.split(" "); // string to array
                total_cls = filterItems(cls).length; //count el array
                for (x in cls) {    
                        n = cls[x].slice(4); // get number only, ex: 1
                        is_chk = jQuery('.show_'+n+':not(:checked)').length; // 0 for checked, 1 not
                        total_cls -= is_chk;
                        if(cls[x] != 'cat_offlinee' || cls[x] != 'cat_onlinee') {
                            total_cls -= is_chk;
                        }
                }

                if (total_cls == 0){
                  jQuery(this).hide(); // if all related chkbx not checked, hide it
                }

              });
            }
        });

Answer 1

您可以为您的复选框创建一个包含所有州的功能。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="show_one" type="checkbox" />
<input class="show_two" type="checkbox" />
<input class="show_three" type="checkbox" />

<div class="category_one">
  category_one
</div>

<div class="category_two category_one">
  category_two
</div>

<div class="category_three">
  category_three
</div>

＆＃13;

String[]::new

＆＃13;

Answer 2

<强> EDITED

让我们执行！

＆＃13;

    function filterItems(array) {
        return array.filter((el) =>
            el.toLowerCase().indexOf('category_') > -1
        )
    }

    
    $( 'div' ).hide(); 
    // to show only div with class category_1, other 
    var cls_1;
    $("div.category_1").each(function(){
         cls_1 = $(this).attr('class');
         cls_1 = cls_1.split(" ");
         if ( filterItems(cls_1).length == 1 ) $(this).show();
    })

    $("input[type='checkbox']").click(function() {
        var num = $( this ).attr( 'class' ); // ex: show_1
        num = num.slice( 5 ); //get text after '_', ex: 1
        
        if ( $(this).is(":checked") ) {
          $('.category_'+num).show();
        }
        else {
          // ex: only div which hasClass category_1
          $('.category_'+num).each(function(){ 
            var cls = $(this).attr('class'); // ex: 'category_1 category_3'
            cls = cls.split(" "); // string to array
            total_cls = filterItems(cls).length; //count el array
            for (x in cls) {
              n = cls[x].slice(9); // get number only, ex: 1
              is_chk = $('.show_'+n+':not(:checked)').length; // 0 for checked, 1 not
              total_cls -= is_chk;
            }
            if (total_cls == 0){
              $(this).hide(); // if all related chkbx not checked, hide it
            }
              
          });
        }
    });

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
    <div class='category_1 no-comment'>one
    </div>
    <div class='category_1 category_2'>one two
    </div>
    <div class='category_2'>two
    </div>
    <div class='test category_3'>three
    </div>
    <div class='category_2 category_4'>two four
    </div>
    <div class='category_4 none'>four
    </div>

    <input type='checkbox' class='show_1' /> One
    <input type='checkbox' class='show_2' /> Two
    <input type='checkbox' class='show_3' /> Three
    <input type='checkbox' class='show_4' /> Four

＆＃13;

jquery显示和隐藏潜水，有多个班级

2 个答案: