我如何用javascript过滤我的产品类别？

pod7payv 于 2023-04-04 发布在 Java

关注(0)|答案(3)|浏览(105)

我有2个按钮，当点击按钮时，它应该根据相应的类别显示产品。然而，有这样一个问题，当你第二次点击按钮时，这些产品再次出现，不断重复。我希望它点击一次，到达一次，而不是每次。我如何防止这种情况？

const arr = [

    {
        "id": "1",
        "Name": "Coke 500ml",
        "Price": "80",
        "Quantity": "50",
        "Category": "bike"
    },

    {
        "id": "2",
        "Name": "Cake",
        "Price": "150",
        "Quantity": "40",
        "Category": "clothing"
    },

    {
        "id": "3",
        "Name": "Beef Ribs",
        "Price": "100",
        "Quantity": "50",
        "Category": "clothing"
    },

    {
        "id": "4",
        "Name": "Cabbage Salad",
        "Price": "50",
        "Quantity": "30",
        "Category": "clothing"
    },

    {
        "id": "5",
        "Name": "Cake",
        "Price": "150",
        "Quantity": "30",
        "Category": "bike"
    },

    {
        "id": "6",
        "Name": "Beef Ribs",
        "Price": "100",
        "Quantity": "30",
        "Category": "bike"
    }
];

const row = document.querySelector('.row')

function filterArrayByCategory(category) {
    const a = arr.filter(el => el.Category === category);
    console.log(a);

    a.map(element => {
        const div = document.createElement('div')
        div.className = 'col-lg-4 col-md-4 col-sm-6 col-12 p-3'
        div.innerHTML = `
                    <div class="card" style="width: 18rem; height: 100% ">
                            <div class="card-body">
                          <h5 class="card-title">${element.Name}</h5>
                           <p class="card-text">${element.Category}</p>
                            </div>
                    </div>
                            `
        row.appendChild(div)
    });

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>

    <button class="bk" onclick="filterArrayByCategory('bike')">bike</button>
    <button class="clthng" onclick="filterArrayByCategory('clothing')">clothing</button>
    

    <section>
        <div class="container">
            <div class="row">
                
            </div>
        </div>
    </section>



    <script src="script.js"></script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75921425/how-can-i-filter-my-products-for-category-with-javascript

3条答案

按热度按时间

ar5n3qh51#

1：使用具有类别信息的数据集值
2：使用类noDisplay通过切换类方法显示/隐藏信息...

const data = 
  [ { id: '1', Name: 'Coke 500ml',    Price:  '80', Quantity: '50', Category: 'bike'     } 
  , { id: '2', Name: 'Cake',          Price: '150', Quantity: '40', Category: 'clothing' } 
  , { id: '3', Name: 'Beef Ribs',     Price: '100', Quantity: '50', Category: 'clothing' } 
  , { id: '4', Name: 'Cabbage Salad', Price:  '50', Quantity: '30', Category: 'clothing' } 
  , { id: '5', Name: 'Cake',          Price: '150', Quantity: '30', Category: 'bike'     } 
  , { id: '6', Name: 'Beef Ribs',     Price: '100', Quantity: '30', Category: 'bike'     } 
  ];

const row     = document.querySelector('.row');
const rowElms = data.map( el =>
  {
  let rowElm         = document.createElement('div');
  rowElm.className   = 'col-lg-4 col-md-4 col-sm-6 col-12 p-3';
  rowElm.dataset.cat = el.Category;     // add category as dataset value.
  rowElm.innerHTML   = `
    <div class="card" style="width: 18rem; height: 100% ">
      <div class="card-body">
        <h5 class="card-title">${el.Name}</h5>
        <p class="card-text">${el.Category}</p>
      </div>
    </div>`;
  return row.appendChild(rowElm);  // map return value is DOM element
  })

function filterArrayByCategory(cat)
  {
  let isAll = (cat==='*' )

  rowElms.forEach(elm => elm.classList.toggle('noDisplay', !(elm.dataset.cat===cat || isAll)));
  }

.noDisplay { display : none; }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<button onclick="filterArrayByCategory('*')"        > All      </button>
<button onclick="filterArrayByCategory('bike')"     > bike     </button>
<button onclick="filterArrayByCategory('clothing')" > clothing </button>

<section>
  <div class="container">
    <div class="row"></div>
  </div>
</section>

赞(0）回复(0）举报 2023-04-04

qyswt5oh2#

只需添加row.innerHTML = '';以在单击时清除行：

const arr = [
  {
    "id": "1",
    "Name": "Coke 500ml",
    "Price": "80",
    "Quantity": "50",
    "Category": "bike"
  },
  {
    "id": "2",
    "Name": "Cake",
    "Price": "150",
    "Quantity": "40",
    "Category": "clothing"
  },
  {
    "id": "3",
    "Name": "Beef Ribs",
    "Price": "100",
    "Quantity": "50",
    "Category": "clothing"
  },
  {
    "id": "4",
    "Name": "Cabbage Salad",
    "Price": "50",
    "Quantity": "30",
    "Category": "clothing"
  },
  {
    "id": "5",
    "Name": "Cake",
    "Price": "150",
    "Quantity": "30",
    "Category": "bike"
  },
  {
    "id": "6",
    "Name": "Beef Ribs",
    "Price": "100",
    "Quantity": "30",
    "Category": "bike"
  }
];

const row = document.querySelector('.row')

function filterArrayByCategory(category) {
  row.innerHTML = '';
  const a = arr.filter(el => el.Category === category);

  a.map(element => {
    const div = document.createElement('div')
    div.className = 'col-lg-4 col-md-4 col-sm-6 col-12 p-3'
    div.innerHTML = `
      <div class="card" style="width: 18rem; height: 100% ">
        <div class="card-body">
          <h5 class="card-title">${element.Name}</h5>
          <p class="card-text">${element.Category}</p>
        </div>
      </div>
    `
    row.appendChild(div)
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>

    <button class="bk" onclick="filterArrayByCategory('bike')">bike</button>
    <button class="clthng" onclick="filterArrayByCategory('clothing')">clothing</button>
    

    <section>
        <div class="container">
            <div class="row">
                
            </div>
        </div>
    </section>



    <script src="script.js"></script>
</body>
</html>

赞(0）回复(0）举报 2023-04-04

lsmepo6l3#

问题是因为你是在追加而不是替换
替换该行

row.appendChild(div);

与

row.innerHTML = div;

赞(0）回复(0）举报 2023-04-04

我来回答

我如何用javascript过滤我的产品类别？

3条答案

相关问题

热门标签

最新问答