0

从选择框中选择 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");
}

和一把小提琴

4

1 回答 1

0

元素的 ID 必须是唯一的。

您可以使用data-*属性来代替。

我不知道天气或不明白，但这里是更新的代码。您只能选择一个、两个或三个条件，

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!");  
    }

}

这是更新的 jsFiddle 演示。

于 2012-11-14T23:11:29.303 回答