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

标签 javascript jquery

如何使用复选框(最好使用 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 都会被取消隐藏。

最佳答案

在这里，我准备了 fiddle 来展示它是如何工作的 - 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 重复所有操作。

关于javascript - 如何使用复选框实现多个过滤器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42635553/

上一篇：javascript - 将客户端数据传递到 url 快速路由

下一篇：javascript - jquery序列化div内容以发布输入数据

相关文章：

javascript - 使用 JQuery 更新隐藏字段

javascript - 表单提交不会停止验证

javascript - initialDate 在 bootstrap-datetimepicker 中不起作用？

javascript - 网页在 Outlook 中无法正常显示

javascript - PHP 循环的新闻/图像 slider ，(JS) 点击重置间隔和更好的唯一 ID 格式

javascript - js如何同时替换两个字符？

javascript - 在激活验证之前查找 jQuery Accordion 中的元素

javascript - 如何删除 ASP.NET 中 UpdatePanel 刷新时重复的 JavaScript 代码？

javascript - 如何在 vis.js 时间轴中对嵌套组进行排序？

javascript - jQuery/JS签名PNG图像编码？

©2024 IT工具网  联系我们