Question

嗨，我是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-cards

<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();
  });
});

Answer 1

您可以使用

<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 %>'>

您可以使用jquery脚本进行微小更改，而不是onclick属性。

Answer 2

好的，我想通了。我所要做的就是添加以下代码：

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

从多个过滤器到单个过滤器

2 个答案: