체크 박스를 사용하는 jQuery 제품 필터 및 : contains() show/hide

Question

한 페이지에 범주의 모든 제품을 나열하는 상점에 간단한 jQuery 제품 필터를 조합하려고합니다. 상점 설치 방법 때문에 AJAX를 통해 달성 할 수 없습니다.

간단히 말해서 카테고리의 모든 제품이 한 페이지에 있습니다. 그들은 다양한 브랜드 제품 이름과 팀 이름을 가지고 있습니다. 마크 업은 다음과 유사합니다 (마지막의 양식은 필자가 필터를 수행하는 방법입니다).

<div id="CategoryContent"> 
<ul> 

<li class="product">Brand1 PRODUCT1 TeamA</li> 
<li class="product">Brand1 PRODUCT2 TeamB</li> 
<li class="product">Brand2 PRODUCT3 TeamB</li> 
<li class="product">Brand2 PRODUCT4 TeamC</li> 
<li class="product">Brand3 PRODUCT5 TeamA</li> 
<li class="product">Brand3 PRODUCT6 TeamD</li> 
<li class="product">Brand4 PRODUCT7 TeamD</li> 
<li class="product">Brand1 PRODUCT8 TeamA</li> 
<li class="product">Brand1 PRODUCT9 TeamA</li> 
<li class="product">Brand1 PRODUCT10 TeamB</li> 
<li class="product">Brand4 PRODUCT11 TeamD</li> 
<li class="product">Brand2 PRODUCT12 TeamA</li> 
</ul> 

<div style="clear:both;"></div> 
<div class="filter"> 
<form id= "brandfilter" action=""> 
    <h2>Brands:</h2> 
<input type="checkbox" name="brand" value="Brand1"/>Brand1 </br> 
<input type="checkbox" name="brand" value="Brand2"/>Brand2 </br> 
<input type="checkbox" name="brand" value="Brand3"/>Brand3 </br>  
<input type="checkbox" name="brand" value="Brand1"/>Brand4 </br> 
</form> 
<form id="teamfilter" action=""> 
<input type="checkbox" name="team" value="TeamA"/>TeamA </br> 
<input type="checkbox" name="team" value="TeamB"/>TeamB </br> 
<input type="checkbox" name="team" value="TeamC"/>TeamC </br> 
<input type="checkbox" name="team" value="TeamD"/>TeamD </br> 
</form> 

이 필터는 내가 원하는대로 작동합니다. 콘솔에서 hide를 show로 바꾸고 Brand1을 Brand2로 바꾸면 TeamA 등이 제대로 작동합니다.

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1)") 
).hide(); 

다음 단계뿐만 아니라 작동하는 이중 필터지고 :이 작업을 점점

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1):contains(TeamA)") 
).hide(); 

내 문제는 두 배입니다. 1은 Brand1/Team A를 변수 (따라서 formids)로 대체합니다.

두 번째는 체크 박스를 클릭했을 때 스크립트를 실행하려고합니다. 둘 중 하나를 클릭하고 둘 다 클릭하면 작동합니다 (위의 스크립트를 사용하면 모두 표시 한 다음 숨기기로 재설정해야 함).

현재이 스크립트를 실행 중이지만 문제가 발생하여 필터가 1 개만 돌아갔습니다.

$("input:checkbox[name='brand']").click(function() { 
    var brandfilter = $(this).val(); 
    alert (brandfilter); 
    $("#CategoryContent li:contains(' + brandfilter + ')").parent().hide(); 
}); 

팝업 경고 내가 (즉 Brand1) 원하지만 숨기기 기능은 이후에 작동하지 않습니다와 나는 다시 콘솔에 다시 내가 [object HTMLFormElement]을 얻을 alert (brandfilter) 때 것입니다. 그래서 변수가 올바르게 저장되지 않았다고 생각합니까?

다음은 간단한 작업 기본 스크립트 http://jsfiddle.net/7gYJc/

Answer 1

, 당신은이를 사용할 수 있습니다

이

$('input:checkbox').change(showHideProducts); 

function showHideProducts() 
{ 
    var checked = $('input:checked'); 
    var products = $('.product'); 

    // If all the boxes are unchecked, show all the products. 
    if (checked.length == 0) 
    { 
     products.show(); 
    } 
    else 
    { 
     products.hide(); 
     checked.each 
     (
      function() 
      { 
       $('.product:contains("' + $(this).val() + '")').show(); 
      }    
     ); 
    } 
}​ 

편집 : 당신은 모든 상자는 아무것도 확인되지 않을 때 표시 할 때문에, 그냥 경우를 추가 (length = 0) 체크하고 거기에있는 모든 것을 보여줍니다 (위 참조).

Answer 2

문제가 어디 있는지 알 수 없지만 대신 :contains 선택의 filter()를 사용하여 시도 할 수있다. filter()을 사용하면 매개 변수로 함수를 사용하므로 사용자 지정 필터링 규칙을 만들 수 있습니다. 당신은 모든 제품을 보여주고 싶기 때문에,

시작 확인 모든 체크 박스에 :

var myProducts = function (brand, team) { 

    brand = brand || ''; 
    team = team || ''; 

    return $('.product').filter(function() { 
     var re = new RegExp(brand + '.+' + team, 'i'); 
     return re.test($(this).text()); 
    }); 

}; 

myProducts('Brand1', 'TeamA').hide(); 
myProducts('Brand2').hide(); 

예 : http://jsfiddle.net/elclanrs/hYZcW/

Answer 3

나는 다음과 같은 접근 방식 함께했다. 사용자가 확인란을 선택하지 않은 경우 해당 브랜드/팀과 일치하는 제품을 숨겨야합니다.

var $filters = $("input:checkbox[name='brand'],input:checkbox[name=team]").prop('checked', true); // start all checked 
var $categoryContent = $('#CategoryContent li'); // cache this selector 
$filters.click(function() { 
    // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest. 
    $categoryContent.hide(); 
    $filters.filter(':checked').each(function(i, el) { 
     $categoryContent.filter(':contains(' + el.value + ')').show(); 
    }); 
});​ 

jsFiddle link : 여기

는 내가 가진 코드입니다. 당신이 어떤 현재 쳤다 상자를 일치하는 항목을 표시 할 가정

Answer 4

이번 주에 여러 번 선택하여 동일한 문제가 발생했습니다. 선택기는 정상적으로 작동했지만 숨김이 작동하지 않았습니다.

.css('visibility', 'hidden'); // instead of .hide() and 
.css('visibility', ''); // instead of .show() 

나는 그것을 이해할 수 있지만 그것을 사용하여 해결할 수있었습니다.