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>

在此示例中，如果我选中专家，则第二级应该隐藏。如果我还检查了硬，则应隐藏第一级和第二级。

这是我的复选框

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

我确实尝试使用bool来解决每个难度，但是如果一个盒子没有被检查，尽管其他盒子被检查，它将取消隐藏所有级别，忽略其他盒子仍被检查的事实。

如果有任何不清楚的地方，请询问。感谢

编辑：这是我使用的方法，但这不起作用，因为当我取消选中其中一个复选框时，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都重复了。

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

1 个答案: