多个复选框过滤器给了我重复的结果

Question

我有一个针对我正在处理的产品页面的复选框过滤器，它可以工作，但是如果一个项目与多个条件匹配，我会得到重复的结果。例如，如果我同时选中“Size 1”和“Nike”，则生成的产品卡片会显示两次。我希望它只显示一次。这是我所拥有的：

let show_sizes_array = []; //Where the filtered sizes get stored

$(document).ready(function() {
  showAllItems(); //Display all items with no filter applied

  $(".size-filter-check").click(function() {
    //When a checkbox is clicked
    let size_clicked = $(this).attr("data-size"); //The certain size checkbox clicked

    if ($(this).is(":checked")) {
      show_sizes_array.push(size_clicked); //Was not checked so add to filter array
      showItemsFiltered(); //Show items grid with filters
    } else {
      //Unchecked so remove from the array
      show_sizes_array = show_sizes_array.filter(function(elem) {
        return elem !== size_clicked;
      });
      showItemsFiltered(); //Show items grid with new filters
    }

    if (!$("input[type=checkbox]").is(":checked")) {
      //No checkboxes are checked
      show_sizes_array = []; //Clear size filter array
      showAllItems(); //Show all items with NO filters applied
    }
  });
});



//Mock API data:
let category_items = [{
    id: 1,
    category_id: 8,
    price: 39.42,
    title: "Shoes with id #1",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size1"],
    brand: ["Nike"]
  },
  {
    id: 2,
    category_id: 8,
    price: 31.93,
    title: "Shoes with id #2",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size2"],
    brand: ["Adidas"]
  },
  {
    id: 3,
    category_id: 8,
    price: 49.44,
    title: "Shoes with id #3",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size3"],
    brand: ["Nike"]
  },
  {
    id: 4,
    category_id: 8,
    price: 65.38,
    title: "Shoes with id #4",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size4"],
    brand: ["Other"]
  },
];

function showAllItems() {
  //Default grid to show all items on page load in
  $("#display-items-div").empty();
  for (let i = 0; i < category_items.length; i++) {
    let item_content =
      '<div class="product-card" data-available-sizes="' +
      category_items[i]["sizes"] +
      '"><b>' +
      category_items[i]["title"] +
      '</b><br><img src="' +
      category_items[i]["thumbnail"] +
      '" height="64" width="64" alt="shoe thumbnail"><p>$' +
      category_items[i]["price"] +
      "</p></div>";
    $("#display-items-div").append(item_content);
  }
}

function showItemsFiltered() {
  //Default grid to show all items on page load in
  $("#display-items-div").empty();
  for (let i = 0; i < category_items.length; i++) {
    //Go through the items but only show items that have size from show_sizes_array
    if (show_sizes_array.some((v) => category_items[i]["sizes"].includes(v))) {
      let item_content =
        '<div class="product-card" data-available-sizes="' +
        category_items[i]["sizes"] +
        '"><b>' +
        category_items[i]["title"] +
        '</b><br><img src="' +
        category_items[i]["thumbnail"] +
        '" height="64" width="64" alt="shoe thumbnail"><p>$' +
        category_items[i]["price"] +
        "</p></div>";
      $("#display-items-div").append(item_content); //Display in grid
    }

    //Test filter for speeds//
    if (show_sizes_array.some((v) => category_items[i]["brand"].includes(v))) {
      let item_content =
        '<div class="product-card" data-available-speed="' +
        category_items[i]["sizes"] +
        '"><b>' +
        category_items[i]["title"] +
        '</b><br><img src="' +
        category_items[i]["thumbnail"] +
        '" height="64" width="64" alt="shoe thumbnail"><p>$' +
        category_items[i]["price"] +
        "</p></div>";
      $("#display-items-div").append(item_content); //Display in grid
    }
    //end test filter//

  }
}

.product-page-wrapper {
  display: flex;
  padding: 20px;
}

.filter-wrapper {
  border: 1px solid #eee;
  width: 20%;
}

.items-wrapper {
  width: 80%
}

.items {
  padding: 20px;
}

.product-card {
  width: 23%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="product-page-wrapper">
  <!--Product Filter-->
  <div class="filter-wrapper">
    <h2>Filter by</h2>
    <hr>
    <h3>Size:</h3>
    <form id="size-form">
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size1">
        <label class="form-check-label" for="size-check">Size 1</label>
      </div>
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size2">
        <label class="form-check-label" for="size-check">Size 2</label>
      </div>
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size3r">
        <label class="form-check-label" for="size-check">Size 3</label>
      </div>
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size4">
        <label class="form-check-label" for="size-check">Size 4</label>
      </div>
    </form>

    <h3>Brand:</h3>
    <form id="brand-form">
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Other">
        <label class="form-check-label" for="size-check">Other</label>
      </div>
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Nike">
        <label class="form-check-label" for="size-check">Nike</label>
      </div>
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Adidas">
        <label class="form-check-label" for="size-check">Adidas</label>
      </div>
      <div class="form-check">
        <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Sketchers">
        <label class="form-check-label" for="size-check">Sketchers</label>
      </div>

    </form>
  </div>

  <!--Display Items-->
  <div class="items-wrapper">
    <div class="items" id="display-items-div"></div>
  </div>

</div>

我对 JS 还是很陌生，所以我很高兴我已经走到了尽头。任何帮助表示赞赏，或者如果我使用了不良做法，请立即纠正我。

Answer 1

Fatin Amirah 解决了我的问题！

 if (show_sizes_array.some((v) => category_items[i]["sizes"].includes(v) || category_items[i]["brand"].includes(v)))

let show_sizes_array = []; //Where the filtered sizes get stored

$(document).ready(function() {
    showAllItems(); //Display all items with no filter applied

    $(".size-filter-check").click(function() {
        // When a checkbox is clicked
        let size_clicked = $(this).attr("data-size"); //The certain size checkbox clicked

        if ($(this).is(":checked")) {
            show_sizes_array.push(size_clicked); //Was not checked so add to filter array
            showItemsFiltered(); //Show items grid with filters
        } else {
            // Unchecked so remove from the array
            show_sizes_array = show_sizes_array.filter(function(elem) {
                return elem !== size_clicked;
            });
            showItemsFiltered(); //Show items grid with new filters
        }
        if (!$("input[type=checkbox]").is(":checked")) {
            // No checkboxes are checked
            show_sizes_array = []; //Clear size filter array
            showAllItems(); //Show all items with NO filters applied
        }
    });
});

// Mock API data:
let category_items = [{
    id: 1,
    category_id: 8,
    price: 39.42,
    title: "Shoes with id #1",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size1"],
    brand: ["Nike"]
},
{
    id: 2,
    category_id: 8,
    price: 31.93,
    title: "Shoes with id #2",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size2"],
    brand: ["Adidas"]
},
{
    id: 3,
    category_id: 8,
    price: 49.44,
    title: "Shoes with id #3",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size3"],
    brand: ["Nike"]
},
{
    id: 4,
    category_id: 8,
    price: 65.38,
    title: "Shoes with id #4",
    thumbnail: "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
    sizes: ["Size4"],
    brand: ["Other"]
}];

function showAllItems() {
    //Default grid to show all items on page load in
    $("#display-items-div").empty();
    for (let i = 0; i < category_items.length; i++) {
        let item_content =
            '<div class="product-card" data-available-sizes="' +
            category_items[i]["sizes"] +
            '"><b>' +
            category_items[i]["title"] +
            '</b><br><img src="' +
            category_items[i]["thumbnail"] +
            '" height="64" width="64" alt="shoe thumbnail"><p>$' +
            category_items[i]["price"] +
            "</p></div>";
        $("#display-items-div").append(item_content);
    }
}

function showItemsFiltered() {
    // Default grid to show all items on page load in
    $("#display-items-div").empty();
    for (let i = 0; i < category_items.length; i++) {
        // Go through the items but only show items that have size from show_sizes_array
        if (show_sizes_array.some((v) => category_items[i]["sizes"].includes(v) || category_items[i]["brand"].includes(v))) {
            let item_content =
                '<div class="product-card" data-available-sizes="' +
                category_items[i]["sizes"] +
                '"><b>' +
                category_items[i]["title"] +
                '</b><br><img src="' +
                category_items[i]["thumbnail"] +
                '" height="64" width="64" alt="shoe thumbnail"><p>$' +
                category_items[i]["price"] +
                "</p></div>";
            $("#display-items-div").append(item_content); //Display in grid
        }
    }
}

.product-page-wrapper {
    display: flex;
    padding: 20px;
}
.filter-wrapper {
    border: 1px solid #eee;
    width: 20%;
}
.items-wrapper {
    width: 80%
}
.items {
    padding: 20px;
}
.product-card {
    width: 23%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="product-page-wrapper">
    <!--Product Filter-->
    <div class="filter-wrapper">
        <h2>Filter by</h2>
        <hr>
        <h3>Size:</h3>
        <form id="size-form">
            <div class="form-check">
                <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size1">
                <label class="form-check-label" for="size-check">Size 1</label>
            </div>
            <div class="form-check">
                <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size2">
                <label class="form-check-label" for="size-check">Size 2</label>
            </div>
            <div class="form-check">
                <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size3r">
                <label class="form-check-label" for="size-check">Size 3</label>
            </div>
            <div class="form-check">
                <input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check" data-size="Size4">
                <label class="form-check-label" for="size-check">Size 4</label>
            </div>
        </form>
        <h3>Brand:</h3>
        <form id="brand-form">
            <div class="form-check">
                <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Other">
        <label class="form-check-label" for="size-check">Other</label>
      </div>
      <div class="form-check">
          <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Nike">
          <label class="form-check-label" for="size-check">Nike</label>
      </div>
      <div class="form-check">
          <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Adidas">
          <label class="form-check-label" for="size-check">Adidas</label>
      </div>
      <div class="form-check">
          <input class="form-check-input size-filter-check" type="checkbox" value="" id="brand-check" data-size="Sketchers">
          <label class="form-check-label" for="size-check">Sketchers</label>
      </div>
  </form>
</div>

<!--Display Items-->
<div class="items-wrapper">
    <div class="items" id="display-items-div"></div>
</div>
</div>