用复选框筛选特效

问题描述：

我的问题是我想要一个过滤系统，它将通过选中的复选框进行过滤。该工具是我比较电视包的比较网站。用复选框筛选特效

我的访问者应该通过他们想要的电视频道来过滤这些包。

示例;
复选框1：发现
复选框2：动物星球
复选框3：迪斯尼频道

输出应该是匹配TV-包
包1：（含发现和迪斯尼频道）
包2：（包含动物星球，迪斯尼频道）
包3：（包含动物星球）

因此，如果复选框1被选中，只显示封装1
如果复选框1 +复选框2被选中应该说“没有找到匹配，但是这个包最接近你的选择”
如果复选框2 +复选框3被选中，它应该只显示与访问者选择完全匹配的包2。

我希望你能帮助我。在这个特定的解决方案之后，我一直在寻找很多，但没有取得任何成功

什么语言/什么库/什么？ – Kroltan 2013-03-17 23:31:22

答

我认为它应该在Jquery中。我已经看过一些类似的过滤示例，但没有人喜欢我的愿望。

答

这是一个古老的问题，但是......我会拍摄一张照片。工作jsfiddle：http://jsfiddle.net/a0nnrfua/

我想很多确实取决于你打算如何定义“最接近”，但假设一个jQuery解决方案，并希望你的浏览器需求过去不是太远，你可以使用数据属性和jQuery来提出一些相对简单的功能。甚至真的使用复选框的值部分。

伪代码，它看起来像：

定义点击或更改处理程序，以检测当一个复选框已被感动/改变。
定义一个函数，它将扫描所有选中的项目并将值传递到“最近包”函数中。
根据该功能的结果，筛选您的包选择，以便以某种方式突出显示或标记您的选择。

因此，让我们假设以下HTML标记：

<h3>TV Channels</h3> 

<div id="TVChannelSelections"> 
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_Discovery" value="Discovery" /> 
    <label for="tvchannel_Discovery">Discovery Channel</label> 
    <br/> 
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_AnimalPlanet" value="Animal Planet" /> 
    <label for="tvchannel_AnimalPlanet">Animal Planet</label> 
    <br/> 
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_DisneyChannel" value="Disney Channel" /> 
    <label for="tvchannel_Disney">Disney Channel</label> 
    <br/> 
</div> 

<div id="message"></div> 
<h3>Packages</h3> 

<div id="FilteredPackages"> 
    <div class="package deselected" id="Package1" data-channels="Discovery,Disney Channel">Package #1</div> 
    <div class="package deselected" id="Package2" data-channels="Animal Planet,Disney Channel">Package #2</div> 
    <div class="package deselected" id="Package3" data-channels="Animal Planet">Package #3</div> 
</div>

所以在jQuery中，你一般更改或单击处理程序将在代码中定义：请注意，我说，你的页面上的任何元素定义了类“tvchannel”，如果发生了变化，请运行我的过滤器函数。

<script type="text/javascript" src="../path/to/jQuery/library"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".tvchannel").on("change", function() { 
      FilterMySelectedChannels(); 
     }); 
    }); 
</script>

现在我们可以定义您的Filter函数。我们将假设两件事。＃1，我们希望找到所有选中的复选框及其值。然后我们将遍历所有包的数据通道属性（定义为class =“package”的元素）。我们将使用某种形式的字符串比较和布尔逻辑来定义完全匹配与紧密匹配，而不是雪茄匹配与完全失败。

为了跟踪我正在使用的3个课程，选择，取消选择和关闭。

在CSS中，您可以决定是否要选择“完全隐藏包装”（即display：none;）或者您希望它是可见的，但是灰色并且“被删除”（即文本修饰：删除线;颜色：灰色;}

我打算使用一种蛮力的方式来做比较，在javascript中有更好的数组函数和比较函数，但是这对大多数人来说应该是相对清楚的，我相信在*上的好人可以用更好的解决方案加以编纂，但是这应该让你开始吧:)

<script type="text/javascript"> 
    function FilterMySelectedChannels() { 
     $checkedboxes = $(".tvchannel:checked"); 
     $packages = $(".package"); 
     var bAnyFound = false; 
     $packages.each(function() { 
      var bCloseButNoCigar = false; 
      var bCompleteMatch = true; 
      var packagearray = $(this).data("channels").split(","); 
      var $currentPackage = $(this); 
      $checkedboxes.each(function() { 
       if ($.inArray($(this).val(), packagearray) != -1) { 
        bCloseButNoCigar = true; 
       } else { 
        bCompleteMatch = false; 
       } 
      }); 

      if (bCompleteMatch) { 
       $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("selected"); 
       bAnyFound = true; 
      } else if (bCloseButNoCigar) { 
       $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("close"); 
      } else { 
       $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("deselected"); 
      } 
     }); 

     if (bAnyFound) { 
      $("#message").html("The following matches were found"); 
     } else { 
      $("#message").html("No actual matches were found, but here are some close matches based on your selections"); 
      $(".package.close").removeClass("deselected").removeClass("close").removeClass("selected").addClass("selected"); 
     } 
    } 
</script> 

<style type="text/css"> 
    .selected { 
     color: red; 
     background-color: yellow !important; 
    } 

    .deselected { 
     color: grey; 
     text-decoration: strike-through !important; 
     background-color: white !important; 
    } 
</style>

有明显的优化可能可以在这里工作，但它是尝试做类似工作的人的开始。请注意，它假定您的标记是动态生成的或正确编码的。如果您需要防范人为错别字，使用.toLowerCase/UpperCase转换文本并使用.Trim函数来消除额外空间将有所帮助。但你仍然必须明智地选择你的数据值，所以没有重叠。如果您选择它们的程度足够好，您可以使用更好的技术，例如正则表达式和通配符搜索来缩短代码。

希望这可以帮助别人！

用复选框筛选特效

相关推荐