2012-04-24 5 views
9

Tôi có một thiết lập bộ lọc đồng vị kết hợp với một số dữ liệu lọc nhóm, đều có một phần còn lại/hiển thị tất cả mục danh sách:đồng vị: đặt lại tất cả tổ hợp lọc

<li><a href="#" data-filter="*">Show all</a></li> 

phải là một cách để thiết lập lại tất cả các data-filter-group's - liên kết 'đặt lại-tất cả'?

javascript hiện tại của tôi là:

 var $container = $('.content ul.sort'), 
      filters = {}; 

     $container.isotope({ 
      itemSelector : '.dynamic-filter' 
     }); 

     // filter buttons 
     $('.filter a').click(function(){ 
      var $this = $(this); 
      // don't proceed if already selected 
      if ($this.hasClass('selected')) { 
      return; 
      } 

      var $optionSet = $this.parents('.option-set'); 
      // change selected class 
      $optionSet.find('.selected').removeClass('selected'); 
      $this.addClass('selected'); 

      // store filter value in object 
      // i.e. filters.color = 'red' 
      var group = $optionSet.attr('data-filter-group'); 
      filters[ group ] = $this.attr('data-filter-value'); 
      // convert object into array 
      var isoFilters = []; 
      for (var prop in filters) { 
      isoFilters.push(filters[ prop ]) 
      } 
      var selector = isoFilters.join(''); 
      $container.isotope({ filter: selector }); 

      return false; 
     }); 

Bất kỳ ý tưởng không?

< - Edit ->

dường như đã tìm thấy một câu trả lời cho câu hỏi của riêng tôi:

 $(".isotope-reset").click(function(){ 
     $(".content ul.sort").isotope({ 
      filter: '*' 
     }); 
    }); 
+1

đưa câu trả lời của bạn trong một câu trả lời thực tế, vì vậy bạn có thể chọn nó và mọi người có thể upvote nó –

Trả lời

15

Như các poster đã không đưa câu trả lời của mình trong một câu trả lời, ở đây nó là dành cho những người được cho câu hỏi này và không thấy rằng có một câu trả lời


Tiếp theo đang reset lọc isotop:

$(".isotope-reset").click(function(){ 
    $(".content ul.sort").isotope({ 
     filter: '*' 
    }); 
}); 
+0

Bạn cũng có thể thêm một dòng thêm để loại bỏ các lớp "chọn" trong đó rất tương tự bấm chức năng, ví dụ như: '$ ('ul.isotope-options li a'). removeClass ('selected');' – cptstarling

1

Tôi đang tìm kiếm một cái gì đó tương tự, nghĩ rằng tôi sẽ đặt câu trả lời ở đây chỉ trong trường hợp một người tìm kiếm đã gặp câu hỏi này. Vấn đề của tôi với giải pháp áp phích được đề cập là ít nhất là đối với tôi, nó không thực sự được thiết lập lại. Tôi muốn các nút để đặt lại cũng như bộ lọc. Ngoài ra tôi đã nhận được một lỗi lạ, sau khi nhấn nút reset, bộ lọc của tôi không hoạt động đúng.

Tập lệnh dưới đây giải quyết tất cả các sự cố của tôi (tại ngày trả lời này, lol). Nguồn: https://github.com/metafizzy/isotope/issues/928

var $anyButtons = $('.filters').find('button[data-filter=""]'); 
    var $buttons = $('.filters button'); 

    $('.button--reset').on('click', function() { 
    // reset filters 
    filters = {}; 
    $grid.isotope({ filter: '*' }); 
    // reset buttons 
    $buttons.removeClass('is-checked'); 
    $anyButtons.addClass('is-checked'); 
    });