jQuery의 filter() 함수를 사용하여 다른 기준으로 배열 추출하기

Question

사용자 체크 박스를 기반으로 필터링하려는 자바 스크립트에 기본 데이터 세트가 저장되어 있습니다. jQuery의 filter() 함수를 사용하여 여러 기준에서 결과를 필터링 할 수 있다는 것을 알고 있지만 실행중인 문제는 사용자 입력에 따라 기준이 변경된다는 것입니다.

var myArray = [["Adelaide", 2, "yes", "female"], 
      ["Ada", 2, "yes", "female"], 
      ["Amanda", 1, "yes", "female"], 
      ["Wolf", 3, "no", "male"], 
      ["Rhonda", 1, "no", "female"]]; 

HTML :

<input id="rate-3" name="rating" type="checkbox" value="rate-3" />3 Stars<br /> 
<input id="rate-2" name="rating" type="checkbox" value="rate-2" />2 Stars<br /> 
<input id="rate-1" name="rating" type="checkbox" value="rate-1" />1 Star<br /> 
<a href="#" id="submitform">Submit Filters</a> 

가 어떻게이 .filter (기능)에 여러 기준을 통과 할 것인가? 예를 들어, 누군가가 속도 1과 3의 체크 박스를 선택할 수 있습니다.이 체크 박스는 현재 내가 찾은 함수를 코딩 한 코드입니다. 그러나 사용자가 입력 한 내용에 따라 유연하게 사용하기를 원합니다.

나는 여러 개의 if/else 문을 작성할 수 있다고 생각하지만이 방법을 사용하는 것이 더 우아한 방법일까요?

JQuery와 :

$("#submitform").click(function() { 
    var userSelectedFilters = new Object(); 

    userSelectedFilters.rate3 = $("#rate-3").is(':checked'); 
    userSelectedFilters.rate2 = $("#rate-2").is(':checked'); 
    userSelectedFilters.rate1 = $("#rate-1").is(':checked'); 

    var filteredArray = myArray.filter(
    function(el) { 
     // currently hardcoded 
     return ((el[1] == 1) || (el[1] == 3)); 
    } 
    ); 

}); 

Answer 1

빌드 배열과 그 숫자가 배열에 포함되어 있는지 확인 : DEMO

$("#submitform").click(function() { 
    var userSelectedFilters = []; 

    $("#rate-3").is(':checked') && userSelectedFilters.push(3); 
    $("#rate-2").is(':checked') && userSelectedFilters.push(2); 
    $("#rate-1").is(':checked') && userSelectedFilters.push(1); 

    var filteredArray = myArray.filter(
    function(el) { 
     // currently hardcoded 
     return userSelectedFilters.indexOf(el[1]) !== -1; 
    } 
    ); 
}); 

indexOf 그래도 보편적 인 것이 아니라, 심가 :

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function (searchElement /*, fromIndex */) { 
     "use strict"; 
     if (this === void 0 || this === null) { 
      throw new TypeError(); 
     } 
     var t = Object(this); 
     var len = t.length >>> 0; 
     if (len === 0) { 
      return -1; 
     } 
     var n = 0; 
     if (arguments.length > 0) { 
      n = Number(arguments[1]); 
      if (n !== n) { // shortcut for verifying if it's NaN 
       n = 0; 
      } else if (n !== 0 && n !== window.Infinity && n !== -window.Infinity) { 
       n = (n > 0 || -1) * Math.floor(Math.abs(n)); 
      } 
     } 
     if (n >= len) { 
      return -1; 
     } 
     var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); 
     for (; k < len; k++) { 
      if (k in t && t[k] === searchElement) { 
       return k; 
      } 
     } 
     return -1; 
    } 
} 

Answer 2

귀하의 HTML을 검토하고 name = "rating []"을 (를) 각 상자, 그것은 당신에게 머리 머리를 많이 줄 것입니다. 그대로

, 당신의 제출 함수 :

$('input:checked').each(function() { 
    userSelectedFilters[this.id] = this.id; 
}); 

그러나 다시, 전체 stackofcode 피할 수있다, 다만 유래 (또는 구글)에 조금 연구를. 어쨌든 :

var myArray = [["Adelaide", 2, "yes", "female"], 
      ["Ada", 2, "yes", "female"], 
      ["Amanda", 1, "yes", "female"], 
      ["Wolf", 3, "no", "male"], 
      ["Rhonda", 1, "no", "female"]]; 

$("#submitform").click(function() { 

    var choices = []; 

    $('input:checked').each(function() { 
     choices.push(this.id.charAt(this.id.length-1)); 

    }); 


    var filteredArray = myArray.filter(
    function(el) { 

     for (i in choices) { 
      if (choices[i] == el[1]) { 
       return true; 
      } 
     } 
     return false 
    } 
    ); 

    console.log (filteredArray); 

}); 

Answer 3

당신이 할 수있는 : 여기에 코드 여기

var myArray = [["Adelaide", 2, "yes", "female"], 
      ["Ada", 2, "yes", "female"], 
      ["Amanda", 1, "yes", "female"], 
      ["Wolf", 3, "no", "male"], 
      ["Rhonda", 1, "no", "female"]]; 

$("#submitform").click(function() { 

    var userSelectedFilters = []; 
    $("input:checkbox:checked").each(function(){ 
     userSelectedFilters.push(this.value) 
    }); 



    var filteredArray = myArray.filter(
    function(el) { 
     // currently hardcoded 
     for (i =0, lungh = userSelectedFilters.length ; i< lungh; i++){ 
      console.log(userSelectedFilters[i]); 
      if (el[1] == userSelectedFilters[i]){ 
       return true; 
      } 

     } 
     return false; 
    } 
    ); 


}); 

바이올린 : http://jsfiddle.net/pWJwt/