用複選框篩選特效

Question

我的問題是我想要一個過濾系統，它將通過選中的複選框進行過濾。 該工具是我比較電視包的比較網站。

1. 我的訪問者應該通過他們想要的電視頻道來過濾這些包。

示例;
複選框1：發現
複選框2：動物星球
複選框3：迪斯尼頻道

輸出應該是匹配TV-包
包1：（含發現和迪斯尼頻道）
包2：（包含動物星球，迪斯尼頻道）
包3：（包含動物星球）

因此，如果複選框1被選中，只顯示封裝1
如果複選框1 +複選框2被選中應該說「沒有找到匹配，但是這個包最接近你的選擇」
如果複選框2 +複選框3被選中，它應該只顯示與訪問者選擇完全匹配的包2。

我希望你能幫助我。在這個特定的解決方案之後，我一直在尋找很多，但沒有取得任何成功

Answer 1

我認爲它應該在Jquery中。我已經看過一些類似的過濾示例，但沒有人喜歡我的願望。

Answer 2

這是一個古老的問題，但是......我會拍攝一張照片。工作jsfiddle：http://jsfiddle.net/a0nnrfua/

我想很多確實取決於你打算如何定義「最接近」，但假設一個jQuery解決方案，並希望你的瀏覽器需求過去不是太遠，你可以使用數據屬性和jQuery來提出一些相對簡單的功能。甚至真的使用複選框的值部分。

僞代碼，它看起來像：

1. 定義點擊或更改處理程序，以檢測當一個複選框已被感動/改變。
2. 定義一個函數，它將掃描所有選中的項目並將值傳遞到「最近包」函數中。
3. 根據該功能的結果，篩選您的包選擇，以便以某種方式突出顯示或標記您的選擇。

因此，讓我們假設以下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中有更好的數組函數和比較函數，但是這對大多數人來說應該是相對清楚的，我相信在stackoverflow上的好人可以用更好的解決方案加以編纂，但是這應該讓你開始吧:)

<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函數來消除額外空間將有所幫助。但你仍然必須明智地選擇你的數據值，所以沒有重疊。如果您選擇它們​​的程度足夠好，您可以使用更好的技術，例如正則表達式和通配符搜索來縮短代碼。

希望這可以幫助別人！