Javascript 如何使用复选框实现多个过滤器？

如何使用复选框（最好使用jQuery）实现多个过滤器

我有多个div元素，它们有自己的数据属性，表示用户已完成的级别的困难

我想使用复选框创建一个过滤器，这样当他们选中某个特定难度的复选框时，该难度将被过滤掉（隐藏）。如果用户想要过滤多个困难，那么这些困难也会被过滤掉。如果用户取消选中该框，则它显然会重新出现

下面是包含数据属性的div元素。设置为true的数据属性是已完成的属性。例如：（数据正常=真表示正常难度已完成）

钮扣

$("#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都将无法隐藏。

在这里，我准备展示它的工作原理-

我会稍微更新一下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>

---

所以它是如何工作的-在复选框上更改它调用updateVisible（）函数。比得到第一个div并展示它的全部。之后，它会测试过滤器的复选框是否选中，div是否有atrr，如果是，则将其隐藏，如果none attr设置为true，则将其设置为该div。然后对所有其他div重复所有操作。

请发布javascript代码，请阅读。关键短语：“搜索、研究”和“解释……任何阻碍你自己解决的困难”@谢谢你的回复。我知道如何按数据属性选择元素和隐藏元素。我已经编辑了我的文章，以展示我的项目中当前使用的示例。我试图实现的是让多个过滤器同时工作。你能发布你尝试过但不起作用的代码吗？

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

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

});