체크 박스를 사용하여 동위 원소 필터링 문제가 있습니다.

Question

Isotope를 필터링하려고하는데, 막혔습니다.

목록의 확인란을 선택 취소하기 위해 목록에있는 모든 목록에있는 두 개의 목록 상자 필터와 모든 확인란의 선택을 취소하고 isotope ({filter : '*'})를 클릭하면됩니다.

내 문제는 정리 목록 단추를 클릭 할 때 표 목록 컨테이너를 동위 원소로 지정하는 방법을 알아낼 수 없다는 것입니다. 논리적으로 그리드 컨테이너는 특정 목록의 값없이 동위 원소가되어야합니다. 당신이 볼 수 있도록

function initIsotope(){ 

    var $wrapper = $('.wrapper'); 

    if($wrapper.length < 1){ 
    return; 
    } 

    var $filters = $('.filters', $wrapper); 
    var $grid = $('.grid-container', $wrapper); 
    var $checkboxList = $ ('.checkbox-list', $wrapper); 
    var $checkboxes = $('.checkbox-control', $wrapper); 
    var $clearList = $('.clear-list', $wrapper); 
    var $clearAll= $('.clear-all', $wrapper); 

    //init Isotope 
    $grid.isotope({ 

     itemSelector: '.grid-item', 
     layoutMode: 'fitRows' 

    }); 

    //isotope filtering on checkbox click 
    // this part of code is from http://jsfiddle.net/desandro/DQydj/ 
    $checkboxes.change(function(){ 

    var filters = []; 
    // get checked checkboxes values 
    $checkboxes.filter(':checked').each(function(){ 
     filters.push(this.value); 
    }); 

    filters = filters.join(', '); 
    $grid.isotope({ filter: filters }); 
    }); 



    //clear list 
    $clearList.on('click', function(e){ 

    e.preventDefault(); 

    var $self = $(this); 

    $self.closest($checkboxList).find($checkboxes).prop("checked", false); 

    //Im stuck here 

    }); 




    //clear-all lists 
    $clearAll.on('click',function(e){ 

    e.preventDefault(); 
    $checkboxes.prop("checked", false); 

    $grid.isotope({ filter: '*' }); 

    }); 



} 



$(function(){ 
    initIsotope(); 
}); 

이 jsfiddle 예를 가지고 여기

내 JS 코드

입니다 : 모든 목록이 명확한 목록 버튼을 명확 때 그리고 그리드 ({ '*'필터를}) 동위 원소한다 : https://jsfiddle.net/timosergio/at7gtc1g/35/

나를 도와 줄 수 있습니까?

추신 : 내 jsFiddle을 업데이트했습니다. 그러나 나는 더 가깝지만 욕망의 결과에 도달했습니다. 확인해보십시오

Answer 1

올바른 closest($checkboxList)을 삭제 한 후에 $clearList.on('click')에 누락 된 유일한 것은 필터 배열을 "재설정"하는 것입니다. 다른 확인란 목록의 가능한 값으로 "다시 채우십시오" . 당신은 필터로 사용할 grid.isotope에 값 배열을 보내
당신이 기능 $checkboxes.change에서와 마찬가지로

// Empty filter array 
var filters = []; 
// get checked checkboxes values 
$checkboxes.filter(':checked').each(function(){ 
    filters.push(this.value); 
}); 

filters = filters.join(', '); 
$grid.isotope({ filter: filters }); 

....

당신은 이미 당신은 '*'을 보내는 $clearAll.on('click')
에 옳은 일을.

편집
난 그냥 중복 코드를 방지하여 스크립트를 단순화하기 위해 내 바이올린을 업데이트했습니다.
체크 박스 값을 가져 오는 부분으로 "하위 기능"을 만들었습니다.
) 다른 SO 독자

Updated Fiddle

참고 : "동위 원소는"멋진 js library이다.