[英]Loop through Array of Objects and append the Object to an Array if it doesn't exist
Desired Functionality: On selecting a checkbox, a span is created with an id & data attribute same as the checkbox and appended to a div.所需功能:选择复选框时,会创建一个跨度,其 id 和数据属性与复选框相同,并附加到 div。 On clicking the 'x' on this span should uncheck the checkbox and remove the span as well.
单击此跨度上的“x”应取消选中该复选框并删除该跨度。
Issue: On selecting the checkbox, an additional span with an 'undefined' label is created.问题:选中该复选框后,会创建一个带有“未定义”label 的附加跨度。
var filtersApplied = [];
$('.ps-sidebar').on('change', 'input[type=checkbox]', function () {
var me = $(this);
console.log('me', me);
if (me.prop('checked') === true) {
filtersApplied.push([
...filtersApplied,
{ id: me.attr('id'), data: me.attr('data-filter-label') }
]);
} else {
filtersApplied = filtersApplied.map(function (item, index) {
return item.filter(function (i) {
return i.id !== item[index].id;
});
});
}
if (filtersApplied.length === 0) {
$('.ps-plans__filters').hide();
$('.ps-plans__filters-applied').html('');
} else {
$('.ps-plans__filters').show();
var filtersAppliedHtml = '';
filtersApplied.map(function (elements) {
console.log('items', elements);
return elements.map(function (el, i) {
console.log('item', el);
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>');
});
});
console.log('filtersAppliedHtml', filtersAppliedHtml);
console.log($('.ps-plans__filters-applied').html(filtersAppliedHtml));
}
});
Your undefined label is because of the ...filtersApplied
您未定义的 label 是因为
...filtersApplied
if (me.prop('checked') === true) {
filtersApplied.push([
//this ...filtersApplied
{ id: me.attr('id'), data: me.attr('data-filter-label') }
]);
Note that filtersApplied is an array and you're making a push()
, this method inserts a value in the end of the array, so your ...filtersApplied
makes no sense.请注意, filtersApplied 是一个数组,并且您正在制作
push()
,此方法会在数组末尾插入一个值,因此您的...filtersApplied
没有意义。 Just remove it and you'll be fine.只需删除它,你会没事的。 You can se more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
你可以在这里看到更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
there are few thing that need to be fixed.几乎没有什么需要修复的。
filtersApplied
along with new object.filtersApplied
与新的 object 一起推送。 instead you better do arr = [...arr, obj]
;arr = [...arr, obj]
;me.attr('id')
.me.attr('id')
应用过滤器。 with map
you would get undefined
values;map
你会得到undefined
的值;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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.