Отображение фильтра комбинации изотопов, я хочу разбить текстовый массив на div - PullRequest
Новая
       24

Отображение фильтра комбинации изотопов, я хочу разбить текстовый массив на div

1 голос
/ 02 мая 2019

У меня есть страница, использующая плагин изотопного фильтра. Фильтр срабатывает по флажку. Фильтрация работает, и фильтр работает. Я хочу напечатать, какой фильтр применяется, а также иметь возможность "снять" флажок фильтра, если я нажму на напечатанное значение фильтра. $ Filterdisplay работает, но это строка, разделенная запятыми. Я хочу разбить строку на кликабельные элементы div, которые бы не фильтровали выбранный фильтр.

Я попытался разбить массив на div, но это вызвало многократное срабатывание печатного значения. Если проверяется c0, а затем после проверки c1 будет отображаться: 

<div>c0</div><div>c0</div><div>c1</div>

Этот пример довольно близок к тому, что я хочу, за исключением того, что он не использует флажки: http://everyonelovessharing.com/misc/isotopedemo/

  $(function(){
  var $container = $('#grid'),
      $checkboxes = $('#filters input');     
var $filterCount = $('.filter-count');
var iso = $container.data('isotope');      
 var $filterDisplay = $('#filter-display'); 

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


    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
    updateFilterCount();

// this made the checkboxes show up multiple times in the display
//   filters.split(', ').map(function(opt) {
//  $("<div>").text(opt).appendTo( $filterDisplay );
//  });      


    $filterDisplay.text( filters );
  });

    function updateFilterCount() {
  $filterCount.text( iso.filteredItems.length + ' webinars match selected filters.' );
    }

    updateFilterCount();   

    //Reset btn
    $(".filter-reset").click(function () {
        $container.isotope({
            filter: '*'
        });
        updateFilterCount();
        $('#filters input:checkbox').prop('checked', false);
        $filterDisplay.text( '' );
        filters = {};
      console.log(filters);
    });  




     });   
</script>
...