從多個過濾器到單個過濾器

嗨，我是Rails新手，目前正在從事一項我老師給我的項目。我有這個代碼，通過複選框過濾我的卡。唯一的問題是，你可以選擇多個類別，這意味着你可以通過多種方式進行篩選。
但我只希望此代碼能夠每次過濾一個類別。它應該只顯示這個類別的卡片，如果我選擇另一個類別，它應該顯示我相應的卡片。從多個過濾器到單個過濾器

這些都是我的過濾器：

<div class="filter-buttons gen-width sidebar hidden-xs"> 
 
    <form id="filters"> 
 
     <% @categories.each do |categ| %> 
 
     <div class="category-list"> 
 
      <input type="checkbox" name='<%= categ %>' id='<%= categ %>'> 
 
      <label class="index-category" for='<%= categ %>'> 
 
      <% if categ == "Social Media" %> 
 
       <i class="fa fa-twitter margin-right-10" aria-hidden="true"></i> 
 
      <% elsif categ == "Content" %> 
 
       <i class="fa fa-pencil margin-right-10" aria-hidden="true"></i> 
 
      <% elsif categ == "Research" %> 
 
       <i class="fa fa-flask margin-right-10" aria-hidden="true"></i> 
 
      <% else %> 
 
       <i class="fa fa-object-group margin-right-5" aria-hidden="true"></i> 
 
      <% end %> 
 
      <%= categ %> 
 
      </label> 
 
     </div> 
 
     <% end %> 
 
    </form> 
 
    </div>

我的卡是與類的div .selectable卡

<div class="selectable-card">My Cards</div>

，這是我的JavaScript過濾

$(document).ready(function() { 
 
    $('#filters input:checkbox').change(function() { 
 
    var selectedCategoryNames = $('#filters input:checkbox:checked').map(function() { 
 
     return $(this).attr('name') 
 
    }).toArray(); 
 

 
    cards = $('.selectable-card'); 
 
    cards.hide() 
 
    cards.each(function() { 
 
     if (selectedCategoryNames.includes($(this).attr('data-category'))) $(this).delay(100).fadeIn(300); 
 
    }); 
 

 
    if (selectedCategoryNames.length === 0) cards.show(); 
 
    }); 
 
});

來源

2017-07-07 WQ.Kevin

好吧，我想通了。我所要做的只是添加下面這行代碼：

$('#filters input:checkbox').not(this).prop('checked', false);

來源

2017-07-08 13:50:40

你可以使用

<input type="radio" name='category' data-category='<%=categ%> id='<%= categ %>' onclick="$('.selectable-card').hide(); $('.selectable-card[data-category=<%=categ%>]').show();">

與同name屬性，而不是

<input type="checkbox" name='<%= categ %>' id='<%= categ %>'>

取而代之的是onclick屬性的，你仍然可以使用jQuery腳本稍作改動。

來源

2017-07-08 04:03:16

從多個過濾器到單個過濾器

回答

相關問題