创建一个循环来扫描数组的值并将其与元素的类名匹配答案

【问题标题】：Create a loop to scan the values of array and match it with the class name of an element创建一个循环来扫描数组的值并将其与元素的类名匹配
【发布时间】：2020-12-29 06:04:55
【问题描述】：

我正在尝试创建一个多重过滤器，在单击复选框时显示相关元素。选中绿色复选框时，应显示绿色 div，单击绿色和红色复选框时，应显示绿色和红色类的 div，否则应显示无。单击复选框后，我已将复选框类存储在数组中。

CONSOLE

<script>
        var classname = [];
        $( function () {

            $( '.check' ).change( function () {
                if ( $( this ).is( ':checked' ) ) {
                    // $( '.main div' ).css( 'display', 'none' );

                    classname.push( ( this ).className );
                    console.log( classname );

                }
                if ( $( this ).is( ':checked' ) == false ) {
                    classname.pop( ( this ).className );
                };
            } );
        } );
        $( '#clear' ).on( 'click', () => {
            $( '.check' ).prop( 'checked', false );
            classname.length = 0;
        } );

    </script>

 <div class="container grid">
                <div class="sidebar">
                    <input type="checkbox" class="green  check">Green
                    <input type="checkbox" class="blue check">Blue
                    <input type="checkbox" class="red check">Red
                    <input type="checkbox" class="yellow check">Yellow
                    <input type="button" value="Clear" id="clear">
                </div>
                <div class="main">
                    <div class="green yellow">Green Yellow</div>
                    <div class="blue red"></div>
                    <div class="yellow"></div>
                    <div class="blue"></div>
                    <div class="green"></div>
                    <div class="green red">Green Red</div>
                    <div class="red yellow">Red Yellow</div>
                    <div class="yellow blue">Yellow Blue</div>
                    <div class="red green">Red Green</div>
                </div>
</div>

【问题讨论】：

标签： javascript jquery filter

【解决方案1】：

        var classname = [];
        $( function () {

            $( '.check' ).change( function () {
                if ( $( this ).is( ':checked' ) ) {
                    // $( '.main div' ).css( 'display', 'none' );
                    
                    if((this).className){
                    classname.push((this).className.split(' ')[0].trim());
                    $( '.main div' ).each(function() {
                    $(this).css('display','none');
                    var block = this;
                    classname.forEach(function(value,index,array){
                    if(block.className.includes(value)){
                      $(block).css('display','block');
                      }
                    });
    });
                    

                    }

                }
                if ( $( this ).is( ':checked' ) == false ) {
                    classname.pop( ( this ).className );
                };
            } );
        } );
        $( '#clear' ).on( 'click', () => {
            $( '.check' ).prop( 'checked', false );
            classname.length = 0;
                      $( '.main div' ).each(function() {
                    
                  $(this).css('display','block');
                  
    });
        } );

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container grid">
                <div class="sidebar">
                    <input type="checkbox" class="green  check">Green
                    <input type="checkbox" class="blue check">Blue
                    <input type="checkbox" class="red check">Red
                    <input type="checkbox" class="yellow check">Yellow
                    <input type="button" value="Clear" id="clear">
                </div>
                <div class="main">
                    <div class="green yellow">Green Yellow</div>
                    <div class="blue red">Blue Red</div>
                    <div class="yellow">Yellow</div>
                    <div class="blue">Blue</div>
                    <div class="green ">Green</div>
                    <div class="green red">Green Red</div>
                    <div class="red yellow">Red Yellow</div>
                    <div class="yellow blue">Yellow Blue</div>
                    <div class="red green">Red Green</div>
                </div>
</div>

我对您的代码进行了一些更改。请检查这是否回答了您的问题。

【讨论】：

【解决方案2】：

我已经缩小并减少了出错的可能性

var classname = [];
$(function () {
    $('.check').change(function () {
        let CurrentObject = $(this);
        let Ischecked = CurrentObject.is(':checked');
        if (Ischecked) {
            if (CurrentObject.className) {
                classname.push(CurrentObject.className.split(' ')[0].trim());
                $('.main div').each(function (index, mainDiv) {
                    // mainDiv.css('display', 'none');   
                    $(mainDiv).hide();
                    classname.forEach(function (value, index, array) {
                        if (mainDiv.className.includes(value)) {
                            // $(mainDiv).css('display', 'block');
                            $(mainDiv).show();
                        }
                    });
                });
            }
        }
        if (!Ischecked) {
            classname.pop(CurrentObject.className);
        };
    });
});

$('#clear').off('click').on('click', () => {
    $('.check').prop('checked', false);
    classname.length = 0;
    $('.main div').each(function (index,mainDiv) {
        // $(mainDiv).css('display', 'block');
        $(mainDiv).show();
    });
});

【讨论】：