Javascript 使用多个单选按钮和重置按钮jquery筛选/排序结果

我有以下显示我的过滤器，因为它目前的立场

我让过滤器根据从一个

name

组中单击的第一个单选按钮进行过滤。然后第二个过滤器从它的

name

组中过滤结果

我陷入困境的地方是能够重置或“全部显示”一个

名称

组，同时保留第二个

名称

组

在某个阶段添加更多的过滤器也很好，但我不确定我的代码结构是否正确，是否可以接受

非常感谢任何帮助

这是JS

var i,
    boxes,
    row,
    classNames = [],
    reset,
    results;

$('.list').on('click', 'input', function(event){

    // Set defualt
    // reset = false;

    // Get the title of the row to be used later
    row = $(this).parents('.list').attr('data-attribute');

    // Hide all results
    $('.results').find('.car').removeClass('active');

    if( $(this).attr('value') == ('clear-' + row) ) {
        console.log('reset button: ' + row);
        //reset = true;

    } else {
        // Set all to FALSE
        $(this).parents('.list[data-attribute="' + row + '"]').find('input').attr('data-filter', 'false');

        // Set the current clicked to TRUE
        $(this).attr('data-filter', 'true');

    };



    // Go get all the list inputs with data-filter="true"
    // incase there have been previous clicks
    classNames = $(this).parents('.list-wrap').find('input[data-filter="true"]');

    $.each(classNames, function(index, className) {

        className = $(className).attr('id');
        console.log(className);
        console.log(index);


        // It would be nice to allow for a larger loop (if more filters are added in the future)
        // Currently basing the following statement on an array size of 2
        // Filtering down the already filterd results
        // if(index !== classNames.length) didn't work
        if(index === 0) {

            results = $('.results').find('.' + className);
            results.addClass('active');
        } else {

            results = $('.results').find(':not(.active.' + className + ')');
            console.log(results);
            results.removeClass('active');
            console.log('index is not 1! See. ' + index);
        }
    });
});

还有HTML

<div class="car active ford green">
    <h4>Type: Ford</h4>
    <h5>Color: Green</h5>
    <p>Lorem.</p>
</div>
<div class="car active ford blue">
    <h4>Type: Ford</h4>
    <h5>Color: Blue</h5>
    <p>Lorem.</p>
</div>
<div class="car active ford blue">
    <h4>Type: Ford</h4>
    <h5>Color: Blue</h5>
    <p>Lorem.</p>
</div>
<div class="car active audi green">
    <h4>Type: Audi</h4>
    <h5>Color: Green</h5>
    <p>Lorem.</p>
</div>
<div class="car active audi blue">
    <h4>Type: Audi</h4>
    <h5>Color: Blue</h5>
    <p>Lorem.</p>
</div>
<div class="car active jeep blue">
    <h4>Type: Jeep</h4>
    <h5>Color: Blue</h5>
    <p>Lorem.</p>
</div>
<div class="car active jeep green">
    <h4>Type: Jeep</h4>
    <h5>Color: Green</h5>
    <p>Lorem.</p>
</div>
<div class="car active jeep blue">
    <h4>Type: Jeep</h4>
    <h5>Color: Blue</h5>
    <p>Lorem.</p>
</div>

类型：福特
颜色：绿色
洛雷姆

类型：福特
颜色：蓝色
洛雷姆

类型：福特
颜色：蓝色
洛雷姆

类型：奥迪
颜色：绿色
洛雷姆

类型：奥迪
颜色：蓝色
洛雷姆

类型:吉普车
颜色：蓝色
洛雷姆

类型:吉普车
颜色：绿色
洛雷姆

类型:吉普车
颜色：蓝色
洛雷姆

设法找到了重置和解决上述问题的方法

如果有人有类似的问题，这里有一些建议

这是我更改/添加的JS

    if( $(this).attr('value') == ('clear-' + row) ) {

        resetNames = $('.list[data-attribute="' + row + '"]').find('input:not([id="clear-' + row + '"])');

        $.each(resetNames, function(i, resetName) {
            resetName = $(resetName).attr('id');
            $('.results').find('.' + resetName).removeClass('active');
        });

    } else {

        // Set the current clicked to TRUE
        $(this).attr('data-filter', 'true');

    };

    // Go get all the list inputs with data-filter="true"
    // incase there have been previous clicks
    classNames = $(this).parents('.list-wrap').find('input[data-filter="true"]');

    // If all data-filter="false" exit and reset results
    // this means another filter name group has been set to 'clear' 
    if(classNames.length === 0) {
        $('.results').find('.car').addClass('active');
        // exit
        return;
    } 

    $.each(classNames, function(index, className) { ..../