여러 클래스로 필터링 한 다음 가장 관련성이 높은 목록을 정렬 하시겠습니까?

Question

jquery/javascript를 사용하여 선택 상자에서 3 가지 기능을 선택한 후 여러 클래스로 목록을 필터링합니다. 지금은 세 가지 기준을 모두 지닌 것을 보여주고 나머지는 페이지의 다른 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-* 속성을 사용할 수 있습니다.

날씨가 좋지 않은지 알 수 없지만 여기서는 업데이트 된 코드를 사용합니다. 당신은 1 개, 2 개 또는 3 개의 기준

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> 

자바 스크립트

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를 선택할 수 있습니다.