Question

我有以下FIDDLE显示我目前的过滤器。

根据点击一个name组的第一个单选按钮，我根据过滤器进行过滤。然后第二个过滤器会过滤其name组内的结果。

我被困住的地方是能够重置或显示全部＆＃39;一个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>

Answer 1

管理以找出重置和解决上述问题的方法。

如果有人遇到类似问题，请FIDDLE。

这是我改变/添加的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) { ..../

使用带有重置按钮jquery的多个单选按钮过滤/排序结果

1 个答案: