Некорректно работает фильтр JS

Question

Пробую делать фильтр на js и столкнулся с проблемой когда фильтра неправильно работает если начать фильтровать товары по двум свойствам. Например, мне нужно отфильтровать товары по размеру S и стране турция, но у меня нет ниодного товара у которого были бы оба этих свойства, поэтому фильтр не должен ничего вывести. Но вместо этого выводится один товар с размером S и страной франция и два товара со страной Турция и размерами M и XL

filters.addEventListener('input', filterGoods);

function filterGoods() {
  const
    goods = [...document.getElementById('goods').children];
    country = filters.querySelector('#country').value,
    sizes = [...filters.querySelectorAll('#size input:checked')].map(n => n.value),

    goods.forEach(function(element){
      element.style.display = 'block';
    })

   let result =  goods.filter(n => (
    (!country || n.dataset.country !== country)  &&
    (!sizes.length || !sizes.includes(n.dataset.size)) 

  ));

  result.forEach(function(element){
    element.style.display = 'none';
  })
}

const filters = document.querySelector('#filters');





#filters {
    border: 1px solid black;
    float: left;
    margin: 0;
  }
  .price-input {
    float: left;
  }
  .input-text {
    width: 50px;
  }
  .single-goods {
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
  }
  .single-goods img {
    width: 70px;
  }

<div id="filters">
        <div class="country"><h2>Country</h2>
          <select id="country">
            <option value="">-- Country --</option>
            <option value="turkey">Turkey</option>
            <option value="china">China</option>
            <option value="france">France</option>
            <option value="italy">Italy</option>   
          </select>     
        </div>
      
        <div class="size"><h2>Size</h2>
          <div id="size">
            <label><input type="checkbox" class="btn" value="S">S</label><br>
            <label><input type="checkbox" class="btn" value="M">M</label><br>
            <label><input type="checkbox" class="btn" value="L">L</label><br>
            <label><input type="checkbox" class="btn" value="XL">XL</label><br>
          </div>
        </div>
      
        <div class="price"><h2>Price</h2>
          <div class="price-input">
            <input class="input-text" type="text" value="" id="price-min">&nbsp;-&nbsp;
          </div>
          <div class="price-input">
            <input class="input-text" type="text" value="" id="price-max">&nbsp;usd&nbsp;
          </div>
        </div>
      </div>
      
      <div id="goods">
        <div class="single-goods" data-country = "france" data-size = "S" data-cost = "1000">
          <h3>Рубашка №1</h3>
          <img src="http://i.piccy.info/i9/9921ed03bf45751d45447b15e78be751/1566814909/19890/1334636/1.jpg">
          <p>Страна: France</p>
          <p>Размер: S</p>
          
          <button class="add-to-cart" data-art="Рубашка №1">Купить</button>
        </div>
        <div class="single-goods" data-country = "turkey" data-size = "M" data-cost = "1200">
          <h3>Рубашка №2</h3>
          <img src="http://i.piccy.info/i9/acc4df9b14e48a42d7cd353e923673e7/1566814962/22015/1334636/2.jpg">
          <p>Страна: Turkey</p>
          <p>Размер: M</p>
          
          <button class="add-to-cart" data-art="Рубашка №2">Купить</button>
        </div>
        <div class="single-goods" data-country = "china" data-size = "L" data-cost = "1700">
          <h3>Рубашка №3</h3>
          <img src="http://i.piccy.info/i9/174610be67bfea39f99c956885ae3786/1566815027/25896/1334636/3.jpg">
          <p>Страна: China</p>
          <p>Размер: L</p>
          
          <button class="add-to-cart" data-art="Рубашка №3">Купить</button>
        </div>
        <div class="single-goods" data-country = "turkey" data-size = "XL" data-cost = "2000">
          <h3>Рубашка №4</h3>
          <img src="http://i.piccy.info/i9/e2e5c6cb274121b9898b7d45a085130f/1566815049/29582/1334636/4.jpg">
          <p>Страна: Turkey</p>
          <p>Размер: XL</p>
          
          <button class="add-to-cart" data-art="Рубашка №4">Купить</button>
        </div>
      </div>

Answer 1

Наверное так хотели

const filters = document.querySelector('#filters');
filters.addEventListener('input', filterGoods);


function filterGoods() {
  const
    goods = [...document.getElementById('goods').children];
    country = filters.querySelector('#country').value,
    sizes = [...filters.querySelectorAll('#size input:checked')].map(n => n.value),

    goods.forEach(element => element.style.display = 'none');
    let result =  goods.filter(n => (
    (!country || n.getAttribute("data-country") === country)  &&
    (!(sizes.length>0) || sizes.includes(n.getAttribute("data-size"))) 

  ));

  result.forEach(function(element){
    element.style.display = 'block';
  })
}

#filters {
    border: 1px solid black;
    float: left;
    margin: 0;
  }
  .price-input {
    float: left;
  }
  .input-text {
    width: 50px;
  }
  .single-goods {
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
  }
  .single-goods img {
    width: 70px;
  }

<div id="filters">
        <div class="country"><h2>Country</h2>
          <select id="country">
            <option value="">-- Country --</option>
            <option value="turkey">Turkey</option>
            <option value="china">China</option>
            <option value="france">France</option>
            <option value="italy">Italy</option>   
          </select>     
        </div>
      
        <div class="size"><h2>Size</h2>
          <div id="size">
            <label><input type="checkbox" class="btn" value="S">S</label><br>
            <label><input type="checkbox" class="btn" value="M">M</label><br>
            <label><input type="checkbox" class="btn" value="L">L</label><br>
            <label><input type="checkbox" class="btn" value="XL">XL</label><br>
          </div>
        </div>
      
        <div class="price"><h2>Price</h2>
          <div class="price-input">
            <input class="input-text" type="text" value="" id="price-min">&nbsp;-&nbsp;
          </div>
          <div class="price-input">
            <input class="input-text" type="text" value="" id="price-max">&nbsp;usd&nbsp;
          </div>
        </div>
      </div>
      
      <div id="goods">
        <div class="single-goods" data-country = "france" data-size = "S" data-cost = "1000">
          <h3>Рубашка №1</h3>
          <img src="http://i.piccy.info/i9/9921ed03bf45751d45447b15e78be751/1566814909/19890/1334636/1.jpg">
          <p>Страна: France</p>
          <p>Размер: S</p>
          
          <button class="add-to-cart" data-art="Рубашка №1">Купить</button>
        </div>
        <div class="single-goods" data-country = "turkey" data-size = "M" data-cost = "1200">
          <h3>Рубашка №2</h3>
          <img src="http://i.piccy.info/i9/acc4df9b14e48a42d7cd353e923673e7/1566814962/22015/1334636/2.jpg">
          <p>Страна: Turkey</p>
          <p>Размер: M</p>
          
          <button class="add-to-cart" data-art="Рубашка №2">Купить</button>
        </div>
        <div class="single-goods" data-country = "china" data-size = "L" data-cost = "1700">
          <h3>Рубашка №3</h3>
          <img src="http://i.piccy.info/i9/174610be67bfea39f99c956885ae3786/1566815027/25896/1334636/3.jpg">
          <p>Страна: China</p>
          <p>Размер: L</p>
          
          <button class="add-to-cart" data-art="Рубашка №3">Купить</button>
        </div>
        <div class="single-goods" data-country = "turkey" data-size = "XL" data-cost = "2000">
          <h3>Рубашка №4</h3>
          <img src="http://i.piccy.info/i9/e2e5c6cb274121b9898b7d45a085130f/1566815049/29582/1334636/4.jpg">
          <p>Страна: Turkey</p>
          <p>Размер: XL</p>
          
          <button class="add-to-cart" data-art="Рубашка №4">Купить</button>
        </div>
      </div>

БЛОГ НА HUSL

Некорректно работает фильтр JS

Ответы (1 шт):