Javascript 同位素组合过滤器显示，我想将文本数组拆分为div

我有一个使用同位素过滤器插件的页面。该过滤器由复选框触发。过滤起作用，过滤计数起作用。我想打印应用的过滤器，如果单击打印的过滤器值，还可以“取消选中”过滤器复选框。$filterdisplay正在运行，但它是一个用逗号分隔的字符串。我想将字符串拆分为可单击的div，以取消筛选选定的筛选器

我尝试将数组拆分为div，但它导致打印值多次激发。如果检查c0，然后在检查c1后，它将显示：

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

c0c1

此示例与我想要的非常接近，只是没有使用复选框：

$（函数（）{
var$container=$（“#网格”），
$复选框=$（“#过滤器输入”）；
变量$filterCount=$（'.filterCount'）；
var iso=$container.data（'同位素'）；
变量$filterDisplay=$（“#过滤器显示”）；
$checkbox.change（函数（）{
var过滤器=[]；
//获取选中的复选框值
$checkbox.filter（“：checked”）.each（function（）{
filters.push（这个值）；
});
//['.red'，'.blue']->'.red，.blue'
filters=filters.join（'，'）；
$container.同位素（{filter:filters}）；
updateFilterCount（）；
//这使得复选框在显示屏上显示多次
//filters.split（'，）.map（函数（opt）{
//$（“”）.text（opt）.appendTo（$filterDisplay）；
//  });      
$filterDisplay.text（过滤器）；
});
函数updateFilterCount（）{
$filterCount.text（iso.filteredItems.length+“网络研讨会匹配所选过滤器”）；
}
updateFilterCount（）；
//重置基站
$（“.filter reset”）。单击（函数（）{
$container.com({
筛选器：'*'
});
updateFilterCount（）；
$（“#过滤器输入：复选框”）.prop（'checked'，false）；
$filterDisplay.text（“”）；
过滤器={}；
控制台日志（过滤器）；
});  
});   

@DrewT您知道我能做什么吗？您只需勾选或取消勾选复选框，而不是将

活动设置为类，将
禁用设置为按钮和
标记上的属性。或者，您仍然可以根据需要添加
disabled
属性，只需更改更新目标，无需切换
active
类，只需将checkbox checked属性设置为
true
或
false
基本上，在我的代码中搜索类似
$this.addClass（'active'）的行
和
$this.removeClass（'active'）
并将其更改为类似：
$myCheckBox.prop（“checked”，true）
和
$myCheckBox.prop（“checked”，false）（
$myCheckBox
的值取决于您的代码-它只需要是您试图选中或取消选中的目标复选框的html节点的jQuery表示）@DrewT你知道我能做什么吗？你只需要勾选或取消勾选复选框，而不是将
活动设置为类，将
禁用设置为按钮和
标记上的属性。或者，您仍然可以根据需要添加
disabled
属性，只需更改更新目标，无需切换
active
类，只需将checkbox checked属性设置为
true
或
false
基本上，在我的代码中搜索类似
$this.addClass（'active'）的行
和
$this.removeClass（'active'）
并将其更改为类似：
$myCheckBox.prop（“checked”，true）
和
$myCheckBox.prop（“checked”，false）（
$myCheckBox
的值取决于您的代码-它只需要是您试图选中或取消选中的目标复选框的html节点的jQuery表示）
  $(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>