Javascript 循环遍历对象数组，如果对象没有'；不存在

所需功能：选中复选框时，将使用与复选框相同的id和数据属性创建一个范围，并将其附加到div。单击该范围上的“x”时，应取消选中复选框并删除该范围

问题：选中该复选框后，将创建一个带有“未定义”标签的额外范围

var filtersApplied=[]；
$（'.ps边栏'）。在（'change'，'input[type=checkbox]'，函数（）{
var me=$（此）；
console.log（'me'，me）；
if（me.prop（'checked'）==true）{
过滤器。推([
…应用过滤器，
{id:me.attr（'id'），data:me.attr（'data-filter-label'）}
]);
}否则{
filtersApplied=filtersApplied.map（函数（项，索引）{
返回项.过滤器（功能（i）{
返回i.id！==项[index].id；
});
});
}
如果（filtersApplied.length==0）{
$（'.ps-plans__filters'）.hide（）；
$（'.ps-plans__-filters-applied'）.html（''）；
}否则{
$（'.ps-plans__filters'）.show（）；
变量过滤器AppliedHTML=''；
filtersApplied.map（函数（元素）{
console.log（'items'，elements）；
返回元素.map（函数（el，i）{
控制台日志（'item'，el）；
返回（过滤器应用DHTML+=
''+el.数据+
"X";；
});
});
log（'filtersAppliedHtml'，filtersAppliedHtml）；
console.log（$（'.ps-plans\uu filters-applicated'）.html（filtersAppliedHtml））；
}
});

您未定义的标签是因为应用了

…过滤器

  if (me.prop('checked') === true) {
    filtersApplied.push([
      //this ...filtersApplied
      { id: me.attr('id'), data: me.attr('data-filter-label') }
    ]);

---

请注意，filtersApplied是一个数组，您正在执行一个

push（）

，此方法在数组末尾插入一个值，因此您的

…filtersApplied

没有意义。只要把它拿走，你就会没事的。您可以在这里查看更多内容

需要修复的事情很少

• 添加元素时，不应将

  filtersapplicated

  与新对象一起推送。相反，您最好执行

  arr=[…arr，obj]

• 删除项目时，可以根据

  me.attr（'id'）

  应用过滤器。使用

  map

  可以得到

  未定义的值
  之后，只需映射一次即可构建html内容，而不是两次
  

---

var filtersApplied=[]；
$（'.ps边栏'）。在（'change'，'input[type=checkbox]'，函数（）{
var me=$（此）；
if（me.prop（'checked'）==true）{
应用的过滤器=[
…应用过滤器，
{id:me.attr（'id'），data:me.attr（'data-filter-label'）}
];
}否则{
filtersApplied=filtersApplied.filter（函数（项，索引）{
return me.attr（'id'）！==item.id；
});
}
如果（filtersApplied.length==0）{
$（'.ps-plans__filters'）.hide（）；
$（'.ps-plans__-filters-applied'）.html（''）；
}否则{
$（'.ps-plans__filters'）.show（）；
变量过滤器AppliedHTML=''；
filtersApplied.map（函数（el，i）{
返回（过滤器应用DHTML+=
'' +
el.data+
"X";；
});
$（'.ps-plans\uu filters-applicated'）.html（filtersAppliedHtml）；
}
});

  if (me.prop('checked') === true) {
    filtersApplied.push([
      //this ...filtersApplied
      { id: me.attr('id'), data: me.attr('data-filter-label') }
    ]);

var filtersApplied = [];
$('.ps-sidebar').on('change', 'input[type=checkbox]', function () {
  var me = $(this);
  if (me.prop('checked') === true) {
    filtersApplied = [
      ...filtersApplied,
      { id: me.attr('id'), data: me.attr('data-filter-label') }
    ];
  } else {
    filtersApplied = filtersApplied.filter(function (item, index) {
      return me.attr('id') !== item.id;
    });
  }

  if (filtersApplied.length === 0) {
    $('.ps-plans__filters').hide();
    $('.ps-plans__filters-applied').html('');
  } else {
    $('.ps-plans__filters').show();
    var filtersAppliedHtml = '';
    filtersApplied.map(function (el, i) {
        return (filtersAppliedHtml +=
          '<span class="ps-plans__filter" id="' +
          el.id +
          '_' +
          i +
          '">' +
          el.data +
          '<span class="icon-remove-circle remove-filter" data-filter="' +
          el.data +
          '">  X</span></span>');
    });
    
    $('.ps-plans__filters-applied').html(filtersAppliedHtml);
  }
});