按多个类过滤然后排列最相关的列表？

Question

我从选择框中选择3个功能后，使用jquery / javascript按多个类过滤列表。现在，它显示了所有三个标准，然后将其余部分放在页面上的另一个div中。

我想知道是否有一种方法不仅可以显示符合所有三个标准的项目，还可以显示两个或一个标准 - 然后如果它没有符合标准，则列在列表的底部或类似的东西。

我只是乱七八糟地对使用jquery / javascript做某事的方法提出任何建议。

<form id="keys" action="results.html">
<select id="key1">
<option id="Android">Android</option>
<option id="Bluetooth">Bluetooth</option>
<option id="Camera">Camera</option>
<option id="Smartactions">Smartactions</option>
<option id="Video">Video</option>
<option id="Cat">Meow</option>
</select>

<select id="key2">
<option id="Android">Android</option>
<option id="Bluetooth">Bluetooth</option>
<option id="Camera">Camera</option>
<option id="Smartactions">Smartactions</option>
<option id="Video">Video</option>
</select>

<select id="key3">
<option id="Android">Android</option>
<option id="Bluetooth">Bluetooth</option>
<option id="Camera">Camera</option>
<option id="Smartactions">Smartactions</option>
<option id="Video">Video</option>
</select>
</form>
<button id="submit" onclick="showList()">Submit</button>

<div id="results">
<ul>
<li class="Bluetooth Camera" style="display:none">DEFY PRO</li>
<li class="Bluetooth Camera Smartactions" style="display:none">Motorola RAZR V</li>
<li class="Bluetooth Camera Smartactions" style="display:none">ATRIX HD LTE</li>
<li class="Android Bluetooth Camera Smartactions Video" style="display:none">Motorola RAZR</li>
<li class="Bluetooth Camera Video" style="display:none">MOTO LUXE</li>
</ul>
</div>

<div id="rest_results">

</div>

我的剧本

function showList() {

    var key1 = keys.key1.value;
    var key2 = keys.key2.value;
    var key3 = keys.key3.value;

    var filter = $("." + key1 + "." + key2 + "." + key3 + "");
    filter.show();

    if (filter.length == 0) {
        alert("There is nothing that matches your criteria");   
    }

    var rest = $('li').not(filter);
    rest.show().appendTo("#rest_results");
}

和fiddle

Answer 1

元素ID必须唯一。

您可以使用data-*属性代替。{/ p>

我不知道天气与否我理解，但这里是更新后的代码。您只能选择一个，两个或三个条件

HTML

<form id="keys" action="results.html">
  <select id="key1">
      <option></option>
      <option data-filter="Android">Android</option>
      <option data-filter="Bluetooth">Bluetooth</option>
      <option data-filter="Camera">Camera</option>
      <option data-filter="Smartactions">Smartactions</option>
      <option data-filter="Video">Video</option>
      <option data-filter="Cat">Meow</option>
  </select>

  <select id="key2">
      <option></option>
      <option data-filter="Android">Android</option>
      <option data-filter="Bluetooth">Bluetooth</option>
      <option data-filter="Camera">Camera</option>
      <option data-filter="Smartactions">Smartactions</option>
      <option data-filter="Video">Video</option>
  </select>

  <select id="key3">
      <option></option>
      <option data-filter="Android">Android</option>
      <option data-filter="Bluetooth">Bluetooth</option>
      <option data-filter="Camera">Camera</option>
      <option data-filter="Smartactions">Smartactions</option>
      <option data-filter="Video">Video</option>
  </select>
</form>
<button id="submit" onclick="showList()">Submit</button>

<br>
<div id="results">
<ul>
    <li class="Bluetooth Camera" style="display:none">DEFY PRO</li>
    <li class="Bluetooth Camera Smartactions" style="display:none">Motorola RAZR V</li>
    <li class="Bluetooth Camera Smartactions" style="display:none">ATRIX HD LTE</li>
    <li class="Android Bluetooth Camera Smartactions Video" style="display:none">Motorola RAZR</li>
    <li class="Bluetooth Camera Video" style="display:none">MOTO LUXE</li>
</ul>
</div>

<br>
<div id="rest_results">


</div>

的JavaScript

function showList() {

    var key1 = $("#key1").find(":selected").data("filter");
    var key2 = $("#key2").find(":selected").data("filter");
    var key3 = $("#key3").find(":selected").data("filter");
    var selectorArr = [];
    var selector;

    if (typeof key1 !== "undefined")
        selectorArr.push("."+key1);
    if (typeof key2 !== "undefined")
        selectorArr.push("."+key2);
    if (typeof key3 !== "undefined")
        selectorArr.push("."+key3);
    selector = selectorArr.join(", ");

    if (selector != "") {
       var filter = $(selector);
       if (filter.length == 0)
           alert("There is no match with your criteria!");
       filter.show();
       var rest = $('li').not(selector);
       $("#rest_results").html("<b>Rest of the results</b>");
       rest.clone().show().appendTo("#rest_results");
    }
    else {
       alert("You must select at least one criteria!");  
    }

}

here is the updated jsFiddle DEMO