Почему так работает foreach?

Question

[Ivan Ivanovich]

Здравствуйте, есть код - https://jsfiddle.net/uw403o75/

Хотел написать простой фильтр элементов, но столкнулся с одной особенностью, которую пока не могу понять.

По задумке пользователь должен нажимать на кнопки с цифрами находящиеся снизу в span-ах, значение записываться в массив и происходить сортировка. Сейчас работает так, что если нажать например на 5, то отобразятся только карточки с цифрой 5, но если после этого нажать например на 6, то значение в массив запишется, но на странице покажутся только элементы с 6-кой, хотя по идеи и с цифрой 5 тоже должны остаться.

Подскажите пожалуйста, почему это происходит?

Answer 1

[twobomb]

const sortByLevel = ()=>{
  document.querySelectorAll('.card .level').forEach(item=>{
        item.style.display = cardLevels.includes(item.textContent)?'block':'none';
  });
};

Comments

[Ivan Ivanovich]

twobomb спасибо, но все-таки почему не работает мой вариант с foreach?

[twobomb]

Ivan Ivanovich, Потому-что вы перебираете массива cardLevels и меняете туда сюда значения и по сути у вас всегда значение отображения будет такое, каким будет условие с последним элементом этого массива, а вам нужно понять есть ли в массиве эта цифра или нет, можно еще так написать

const sortByLevel = ()=>{
  document.querySelectorAll('.card .level').forEach(item=>{
  	let isFind = false;
    cardLevels.forEach(level=>{
     if(item.textContent == level)
     	isFind = true;
    });
    
      if(!isFind){
        item.style.display = 'none';
      } else {
        item.style.display = 'block';
      }
  });
};

[Ivan Ivanovich]

twobomb, спасибо за объяснение