如果數組不存在，則循環遍歷對象數組和 append 和 Object 到數組

Question

所需功能：選擇復選框時，會創建一個跨度，其 id 和數據屬性與復選框相同，並附加到 div。 單擊此跨度上的“x”應取消選中該復選框並刪除該跨度。

問題：選中該復選框后，會創建一個帶有“未定義”label 的附加跨度。

JSFIDDLE

  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));
  }
});

Answer 1

您未定義的 label 是因為...filtersApplied

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

請注意， filtersApplied 是一個數組，並且您正在制作push() ，此方法會在數組末尾插入一個值，因此您的...filtersApplied沒有意義。 只需刪除它，你會沒事的。 你可以在這里看到更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Answer 2

幾乎沒有什么需要修復的。

• 添加元素時，您不應將filtersApplied與新的 object 一起推送。 相反，你最好做arr = [...arr, obj] ;
• 刪除項目時，您可以根據me.attr('id')應用過濾器。 使用map你會得到undefined的值；
• 之后，您只需 map 一次來構建您的 html 內容，而不是兩次；

---

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);
  }
});