자바 스크립트의 속성을 기반으로 목록의 항목 필터링

Question

확인란을 선택/선택 취소하여 목록의 항목을 숨기거나 표시하는 간단한 자바 스크립트를 작성합니다.

예를 들어 빨강, 파랑, 녹색을 나타내는 3 개의 체크 박스가있을 수 있습니다. 그리고 그 색상 중 하나 이상으로 사용 가능한 제품 목록. 따라서 빨간색과 녹색 확인란을 선택하면 빨간색 또는 녹색으로 제공되지 않는 제품을 숨겨야합니다.

나는 꽤 나는이 작업을 수행 할 수있는 행복,하지만 난 (사실 나는 그것의 세련 확신 해요) 내가 무슨 일을하고있어 매우 우아한 모르겠어요 자바 스크립트 개발자 인 아니에요. 스프레드 시트에 원본 데이터가 있으므로 각 제품에 대한 데이터의 CSV 파일을 쉽게 얻을 수 있습니다 (예 : "bike, x ,, x"는 자전거가 빨간색과 초록색을 사용할 수 있지만 파란색은 아닙니다.

그래서 같은 끝낼 수있는 다음 :

products = [ 
    { 
     id: "bike", 
     colours: ["x","","x"] 
    }, 
    { 
     id: "apple", 
     colours: ["x","x",""] 
    }, 
    { 
     id: "cheese", 
     colours: ["","","x"] 
    } 
]; 



function selectProducts(filter){ 
    var i; 
    for(i=0; i<products.length; i++){ 
     var fi; 
     for(fi=0; fi<filter.length; fi++){ 
      if(filter[fi]=='x' && products[i].colours[fi]=='x'){ 
      console.log(products[i].id+" will be visible "); 
      break; 
      } 
     } 
    } 
} 

이 selectProducts에 전달 필터는 빨간색이나 녹색 나타낼 수있다 [ 'X', 'X', '']와 같은 배열이 될 것입니다 파란색은 아니며 제품의 색상 속성과 정확히 동일합니다. 나의 본능은 처음에 사용 가능한 색상의 이진 표현 (예 : 위의 예제에서 자전거의 경우 101)을 사용하여 비트 단위로 그리고 필터가 더 쉽고 효율적이라고 생각했지만 자바 스크립트는 숫자를 부동 소수점으로 저장하고 숫자에 대한 이진 표현으로 작업하는 쉬운 방법을 알지 못합니다.

아마 다음과 같은 더 나은 것,하지만

colours: { 
    red: "y", 
    green: "n", 
    blue: "y" 
} 

어떤 생각 ... 조금 자세한 것, 그리고 약간 더있을 csv 파일로 변환하기 위해 복잡하게? 처음에 내가 거기에 어떤 PHP 가능한 서버 측 인에 의존하지 수 있기 때문에 이후 내가 PHP를 사용할 수 있다는 것을 발견했지만

나는,이 클라이언트 측을하고 있어요. 나는 응답성에 대해서만 여전히 클라이언트 측에 맡기를 원합니다. 목록이 너무 길지 않으면 좋을 것 같습니다. 나는 아마도 두 가지 방법을 시도해보고 그들이 어떻게 비교하는지 볼 것입니다 ...

Answer 1

몇 년 후 ... 이것은 내가 어떻게 할 것인가입니다 : JSFiddle 그것은 당신의 행동 방식보다 반드시 꼭 맞는 것은 아닙니다. 그냥 다른 것과 나는 당신과 그것을 나눌 것이라고 생각했습니다. 당신이 당신의 방법으로 갈 것 인 경우에 각각 부울 값 true와 false 함께 "x" 및 "" 변경뿐만 아니라 확실히하는 것이 좋습니다.