如何使用復選框實現多個過濾器？

Question

如何使用復選框（最好是使用jQuery）來實現多個過濾器？

我有多個具有自己的數據屬性的div元素，這些元素代表用戶已完成的級別的困難。

我想使用復選框創建過濾器，以便當他們選中完成特定難度的復選框時，該難度會被濾除（隱藏）。 如果用戶想過濾多個困難，那么這些困難也將被濾除。 如果用戶取消選中該框，則顯然會再次出現。

這是包含數據屬性的div元素。 設置為true的數據屬性是已完成的屬性。 例如（data-normal = true表示完成普通難度）

<div class="map-col-container col-xs-12 col-sm-6 col-md-4" data-mapname="Level One" data-completed="2" data-easy="true" data-normal="false" data-hard="true" data-expert="false">
        <div class="map-col">
        <!--Content Here-->
        </div>
    </div>
<div class="map-col-container col-xs-12 col-sm-6 col-md-4" data-mapname="Level Two" data-completed="4" data-easy="true" data-normal="true" data-hard="true" data-expert="true">
        <div class="map-col">
        <!--Content Here-->
        </div>
    </div>
<div class="map-col-container col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="true" data-normal="false" data-hard="false" data-expert="false">
        <div class="map-col">
        <!--Content Here-->
        </div>
    </div>

在這個例子中，如果我檢查了expert ，那么Level 2應該被隱藏了。 如果我也努力檢查了，則第一級和第二級都應該隱藏。

這是我的復選框

      <div class="checkbox">
        <label><input type="checkbox" id="hideEasyChkBox">Hide Easy</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" id="hideNormalChkBox">Hide Normal</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" id="hideHardChkBox">Hide Hard</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" id="hideExpertChkBox">Expert</label>
      </div>

我確實嘗試過使用布爾值解決每個困難，但是，如果盡管選中了其他框而未選中框，則它將取消隱藏所有級別，而忽略了其他框仍處於選中狀態。

如果不清楚，請詢問。 謝謝

編輯：這是我使用的方法，但是當我取消選中其中一個復選框，div的重置並顯示所有級別而忽略其他復選框仍處於選中狀態時，此方法不起作用。

var hideCompleted = false;
var hideEasy = false;
var hideNormal = false;
var hideHard = false;
var hideExpert = false;

function mapCompletionFilter(filterBy){
  var $wrapper = $('.map-container');

  if(filterBy == "hideCompleted" && !hideCompleted){
    //$wrapper.find(".map-col-container[data-completed*=4]").hide();
    $wrapper.find(".map-col-container").filter('[data-completed="4"]').hide();
    hideCompleted = true;
  }
  else if(filterBy == "hideCompleted" && hideCompleted){
    $wrapper.find(".map-col-container[data-completed*=4]").show();
    hideCompleted = false;
  }

  if(filterBy == "hideEasy" && !hideEasy){
    //$wrapper.find(".map-col-container[data-completed*=4]").hide();
    $wrapper.find(".map-col-container").filter('[data-easy="true"]').hide();
    hideEasy = true;
  }
  else if(filterBy == "hideEasy" && hideEasy){
    $wrapper.find(".map-col-container").filter('[data-easy="true"]').show();
    hideEasy = false;
  }

  if(filterBy == "hideNormal" && !hideNormal){
    //$wrapper.find(".map-col-container[data-completed*=4]").hide();
    $wrapper.find(".map-col-container").filter('[data-normal*="true"]').hide();
    hideNormal = true;
  }
  else if(filterBy == "hideNormal" && hideNormal){
    $wrapper.find(".map-col-container").filter('[data-normal*="true"]').show();
    hideNormal = false;
  }

  if(filterBy == "hideHard" && !hideHard){
    //$wrapper.find(".map-col-container[data-completed*=4]").hide();
    $wrapper.find(".map-col-container").filter('[data-hard*="true"]').hide();
    hideHard = true;
  }
  else if(filterBy == "hideHard" && hideHard){
    $wrapper.find(".map-col-container").filter('[data-hard*="true"]').show();
    hideHard = false;
  }

  if(filterBy == "hideExpert" && !hideExpert){
    //$wrapper.find(".map-col-container[data-completed*=4]").hide();
    $wrapper.find(".map-col-container").filter('[data-expert*="true"]').hide();
    hideExpert = true;
  }
  else if(filterBy == "hideExpert" && hideExpert){
    $wrapper.find(".map-col-container").filter('[data-expert*="true"]').show();
    hideExpert = false;
  }
}

紐扣

$("#hideAllCompletedChkBox").click(function(){
  mapCompletionFilter("hideCompleted");
});
$("#hideEasyChkBox").click(function(){
  mapCompletionFilter("hideEasy");
});
$("#hideNormalChkBox").click(function(){
  mapCompletionFilter("hideNormal");
});
$("#hideHardChkBox").click(function(){
  mapCompletionFilter("hideHard");
});
$("#hideExpertChkBox").click(function(){
  mapCompletionFilter("hideExpert");
});

我遇到的主要問題是，當我使用多個復選框來隱藏每個單獨的困難時，如果未選中這些復選框之一，則所有div都將變為隱藏狀態。

Answer 1

在這里，我准備小提琴以展示其工作原理-https: //jsfiddle.net/skyr9999/nynbupwh/

我對您的html進行了一些更新，以確保並測試所有工作正常。

這是html：

<div id="elems">
    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level One" data-completed="2" data-easy="true" data-normal="false" data-hard="true" data-expert="false">
        <div class="map-col">
            Easy, hard
        </div>
    </div>
    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level Two" data-completed="3" data-easy="true" data-normal="true" data-hard="true" data-expert="true">
        <div class="map-col">
            Easy, Normal, Expert
        </div>
    </div>
    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="true" data-normal="false" data-hard="false" data-expert="false">
        <div class="map-col">
            Easy
        </div>
    </div>

    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="false" data-normal="true" data-hard="false" data-expert="false">
        <div class="map-col">
            Normal
        </div>
    </div>

    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="false" data-normal="false" data-hard="true" data-expert="false">
        <div class="map-col">
            Hard
        </div>
    </div>

    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="false" data-normal="false" data-hard="false" data-expert="true">
        <div class="map-col">
            Expert
        </div>
    </div>

    <div class="datadiv col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="false" data-normal="false" data-hard="false" data-expert="false">
        <div class="map-col">
            None
        </div>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" id="hideEasyChkBox">Hide Easy</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" id="hideNormalChkBox">Hide Normal</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" id="hideHardChkBox">Hide Hard</label>
    </div>
</div>


<div class="checkbox">
    <label><input type="checkbox" id="hideExpertChkBox">Expert</label>
</div>

和js：

jQuery(document).ready(function ($) {

    updateVisible = function () {
        $("#elems>div.datadiv").each(function (index, value)
        {
            $(value).show();

            if ($(value).attr("data-expert") === "true")
            {
                if ($("#hideExpertChkBox").is(':checked'))
                {
                    $(value).hide();
                }
            }

            if ($(value).attr("data-hard") === "true")
            {
                if ($("#hideHardChkBox").is(':checked'))
                {
                    $(value).hide();
                }
            }


            if ($(value).attr("data-normal") === "true")
            {
                if ($("#hideNormalChkBox").is(':checked'))
                {
                    $(value).hide();
                }
            }


            if ($(value).attr("data-easy") === "true")
            {
                if ($("#hideEasyChkBox").is(':checked'))
                {
                    $(value).hide();
                }
            }
        });

    };

    $(document).on("change", "#hideEasyChkBox", function () {
        updateVisible();
    });

    $(document).on("change", "#hideNormalChkBox", function () {
        updateVisible();
    });

    $(document).on("change", "#hideHardChkBox", function () {
        updateVisible();
    });

    $(document).on("change", "#hideExpertChkBox", function () {
        updateVisible();
    });

});

因此它是如何工作的-在復選框上進行更改時，調用updateVisible（）函數。 比它首先獲得div並顯示所有內容。 之后，它會測試是否選中了過濾器的復選框，以及div是否具有atrr，如果是，則將其隱藏，如果沒有attr設置為true，則僅輸入該div。 然后對所有其他div重復所有操作。