リセットボタンjqueryを含む複数のラジオボタンを使用したフィルタ/ソート結果

Question

私は現在フィルタとして表示されているFIDDLEを持っています。

nameグループからクリックした最初のラジオボタンに基づいてフィルタをフィルタリングします。そして、2番目のフィルタは、そのグループ内の結果をフィルタリングします。nameグループ。

私が立ち往生しているのは、nameグループの2番目の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) { ..../