数据目标（Data-Target）在addEventListener中无法正常工作

Question

当选择筛选类别时，active2类将添加到该类别以在按钮周围添加蓝色圆圈。此函数适用于菜单本身。但是，我在每张卡片上都有标有“替代”的按钮。一旦单击，它们会选择相应的数据目标，就像您从顶部的类别中选择一样，但是active2类不会添加到该类别。

例如，如果您滚动到“避孕套1”卡并单击替代，您将看到仅显示“避孕套1”卡，但顶部的筛选按钮仍然保持在“全部”下。如果您使用顶部的筛选按钮选择避孕套，则只会显示“避孕套1”，并且避孕套按钮将具有来自active2类的蓝色圆圈，这就是我想发生的。感谢任何帮助或建议，谢谢！

function fn(query) {
  const filterButtons = document.querySelector(query).children;
  const items = document.querySelector(".machine__content").children;

  for (let i = 0; i < filterButtons.length; i++) {
    filterButtons[i].addEventListener("click", function() {
      for (let j = 0; j < filterButtons.length; j++) {
        filterButtons[j].classList.remove("active2");
      }
      this.classList.add("active2");
      const target = this.getAttribute("data-target");

      for (let k = 0; k < items.length; k++) {
        items[k].style.display = "none";
        if (target == items[k].getAttribute("data-id")) {
          items[k].style.display = "block";
        }
        if (target == "all") {
          items[k].style.display = "block";
        }
      }
    });
  }
}



fn('#filter-btns');
fn('#filter-machine');
fn('#filter-levo5');
fn('#filter-condoms');
fn('#filter-fem');
fn('#filter-other');

/*=============== GOOGLE FONTS ===============*/

@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open+Sans:wght@400;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/*=============== VARIABLES CSS ===============*/

:root {
  --header-height: 3.5rem;
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --hue: 112;
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;
  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none
}

html {
  scroll-behavior: smooth;
}


/* Responsive typography */

@media screen and (min-width: 1224px) {
   :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}


/*=============== BASE ===============*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  overflow-x: hidden;
  position: relative;
}

#page-background {
  background: url(../img/shape-bg.webp);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
}


/* Active link */

.active-link {
  color: var(--first-color);
}


/*=============== Filter ===============*/

.filter-buttons {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.filter-buttons ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.filter-buttons ul li {
  color: black;
  font-weight: 500;
  display: inline-block;
  margin: 0px 8px;
  cursor: pointer;
  padding-bottom: 0px;
}

.filter-buttons ul li.active2 {
  color: rgb(38, 38, 59);
  border: 2px solid var(--first-color);
  border-radius: 25px;
  padding: 2px 15px 2px 15px;
}


/*=============== Filter End ===============*/


/*=============== BLOG ===============*/

.blog__container {
  padding-bottom: 2rem;
}

.blog__content {
  row-gap: 3rem;
}

.blog__card {
  border: .11px solid whitesmoke;
  background-color: whitesmoke;
  border-radius: .5rem;
  padding: 20px;
  position: relative;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
  transition: 0.5s all ease-in-out;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
  display: block;
  border: .1px solid white;
}

.blog__image:hover {
  transform: scale(1.05);
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
  transition: 0.5s all ease-in-out;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
  display: block;
  border: .1px solid white;
}

.blog__image:hover {
  transform: scale(1.05);
}

.blog__button {
  display: inline-flex;
  background-color: white;
  padding: 1.15rem;
  border-radius: .5rem 0 .5rem 0;
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  right: 0;
  bottom: 0;
}

.blog__button i {
  transform: rotate(-30deg);
  transition: .4s;
}

.blog__button:hover i {
  transform: rotate(-30deg) translateX(.25rem);
}

.blog__title {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: .75rem;
  cursor: default;
}

.blog__description {
  margin-bottom: 1.5rem;
  cursor: default;
}

.blog__footer,
.blog__reaction {
  display: flex;
  align-items: center;
}

.blog__footer {
  column-gap: 1.5rem;
}

.blog__reaction {
  column-gap: .25rem;
}

.blog__reaction i {
  font-size: 1.25rem;
}

.blog__reaction span {
  font-size: var(--small-font-size);
  cursor: pointer;
}

.bx {
  cursor: pointer;
}


/*=============== Our Machines ===============*/

.machine__container {
  margin-top: 0px;
  border: .11px solid rgb(195, 239, 233);
  background-color: rgba(244, 247, 247, 0.891);
  border-radius: 30px;
  padding: 20px;
  position: relative;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
}

.machine__content {
  row-gap: 3rem;
}

.machine__card {
  border: .11px solid whitesmoke;
  background-color: whitesmoke;
  border-radius: .5rem;
  padding: 20px;
  position: relative;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
}

.machine__image {
  position: relative;
  margin-bottom: 1.5rem;
  transition: 0.5s all ease-in-out;
}

.machine__img {
  border-radius: .5rem;
  display: block;
}

.machine__image:hover {
  transform: scale(1.05);
}

.machine__button {
  display: inline-block;
  background-color: #38afff;
  color: whitesmoke;
  padding: 1rem 1rem;
  font-weight: 500;
  border-radius: 10px;
  transition: .3s;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  margin-left: -10px;
}

.machine__button:hover {
  background-color: #3197db;
}

.machine__button i {
  transition: .4s;
}

.machine__button:hover i {
  transform: translateY(-.15rem) translateX(.15rem);
}

.machine__title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: .75rem;
  cursor: default;
}

.machine__data {
  text-align: center;
  margin-top: 20px;
}

.machine__description {
  margin-bottom: 1.5rem;
  cursor: default;
}

.machine__footer,
.machine__reaction {
  display: flex;
  align-items: center;
}

.machine__footer {
  column-gap: 1.5rem;
  justify-content: center;
}

.machine__reaction {
  column-gap: .25rem;
}

.machine__reaction i {
  font-size: 1.25rem;
}

.machine__reaction span {
  font-size: var(--small-font-size);
  cursor: pointer;
}

.bx {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <!--=============== CSS ===============-->
  <link rel="stylesheet" href="assets/css/styles.css">
  <link rel="stylesheet" href="assets/css/scroll_nav.css">





</head>

<body>

  <!--==================== BLOG ====================-->
  <section class="blog section__blog" id="blog">
    <br/><br/>
    <div class="blog__container container__blog">

      <!--==================== Filter ====================-->
      <br/>

      <div class="filter-buttons">
        <ul id="filter-btns">
          <li class="active2" data-target="all">All</li>
          <li data-target="mach">Machines</li>
          <li data-target="levo">Levonorgestrel</li>
          <li data-target="condoms">Condoms</li>
          <li data-target="fem">Feminine Hygiene</li>
          <li data-target="other">Other</li>

        </ul>
      </div>

      <br/>


      <div class="machine__content grid__blog">




        <article data-id="mach" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/planb-products.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Machine 1
            </h2>
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-machine">
              <a data-target="mach" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>
            </a>

          </div>





        </article>



        <article data-id="levo" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/planb-products.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Levonorgestrel 1
            </h2>
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-levo5">
              <a data-target="levo" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>
            </a>

          </div>





        </article>





        <article data-id="condoms" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/trojanlogo.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Condoms 1
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-condoms">
              <a data-target="condoms" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>

          </div>



        </article>







        <article data-id="fem" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/durextest.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Feminine 1
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-fem">
              <a data-target="fem" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>

          </div>

        </article>



        <article data-id="other" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/durextest.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Other 1
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-other">
              <a data-target="other" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>

          </div>

        </article>



      </div>
    </div>
  </section>



  <br/><br/><br/>



  </main>




  <!--=============== GSAP ===============-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>


  <!--=============== MAIN JS ===============-->
  <script src="assets/js/main.js"></script>
</body>

</html>

- ohmygodimpregnant

---

为什么要将顶部菜单项的事件监听器与页面其余部分的按钮的事件监听器结合在一起？这只会让它变得非常混乱。this.classList.add("active2"); - 当监听器绑定到下面的按钮时，this不指代任何顶部菜单项。在这种情况下，您可以选择 document.querySelector(#filter-btns [data-target='${this.dataset.target}'])，但可能有更简单的方法使用事件委托来编写此代码。 - Sebastian Simon

@SebastianSimon 抱歉，我刚开始学。您是在建议我用 document.querySelector(#filter-btns [data-target='${this.dataset.target}']) 替换 this.classList.add("active2") 吗？那么您说的要包含的内容应该放在哪里呢？ - ohmygodimpregnant

Answer 1

在不完全重构代码的情况下，您可以为元素添加click监听器，以更新相应的元素，并使用所需的样式。

为方便参考，以下是添加的JS：

const filters = document.querySelectorAll('li[data-target]')
const targets = document.querySelectorAll('a[data-target]')

for (const target of targets) {
  target.addEventListener('click', e => {
    const filterTarget = e.currentTarget.dataset.target
    const filter = document.querySelector(`li[data-target=${filterTarget}]`)
    
    for (const filter of filters) {
      filter.classList.remove('active2')
    }
    filter.classList.add('active2')
  })
}

function fn(query) {
  const filterButtons = document.querySelector(query).children;
  const items = document.querySelector(".machine__content").children;

  for (let i = 0; i < filterButtons.length; i++) {
    filterButtons[i].addEventListener("click", function() {
      for (let j = 0; j < filterButtons.length; j++) {
        filterButtons[j].classList.remove("active2");
      }
      this.classList.add("active2");
      const target = this.getAttribute("data-target");

      for (let k = 0; k < items.length; k++) {
        items[k].style.display = "none";
        if (target == items[k].getAttribute("data-id")) {
          items[k].style.display = "block";
        }
        if (target == "all") {
          items[k].style.display = "block";
        }
      }
    });
  }
}



fn('#filter-btns');
fn('#filter-machine');
fn('#filter-levo5');
fn('#filter-condoms');
fn('#filter-fem');
fn('#filter-other');

const filters = document.querySelectorAll('li[data-target]')
const targets = document.querySelectorAll('a[data-target]')

for (const target of targets) {
  target.addEventListener('click', e => {
    const filterTarget = e.currentTarget.dataset.target
    const filter = document.querySelector(`li[data-target=${filterTarget}]`)
 
    for (const filter of filters) {
      filter.classList.remove('active2')
    }
    filter.classList.add('active2')
  })
}

/*=============== GOOGLE FONTS ===============*/

@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open+Sans:wght@400;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/*=============== VARIABLES CSS ===============*/

:root {
  --header-height: 3.5rem;
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --hue: 112;
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;
  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none
}

html {
  scroll-behavior: smooth;
}


/* Responsive typography */

@media screen and (min-width: 1224px) {
   :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}


/*=============== BASE ===============*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  overflow-x: hidden;
  position: relative;
}

#page-background {
  background: url(../img/shape-bg.webp);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
}


/* Active link */

.active-link {
  color: var(--first-color);
}


/*=============== Filter ===============*/

.filter-buttons {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.filter-buttons ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.filter-buttons ul li {
  color: black;
  font-weight: 500;
  display: inline-block;
  margin: 0px 8px;
  cursor: pointer;
  padding-bottom: 0px;
}

.filter-buttons ul li.active2 {
  color: rgb(38, 38, 59);
  border: 2px solid var(--first-color);
  border-radius: 25px;
  padding: 2px 15px 2px 15px;
}


/*=============== Filter End ===============*/


/*=============== BLOG ===============*/

.blog__container {
  padding-bottom: 2rem;
}

.blog__content {
  row-gap: 3rem;
}

.blog__card {
  border: .11px solid whitesmoke;
  background-color: whitesmoke;
  border-radius: .5rem;
  padding: 20px;
  position: relative;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
  transition: 0.5s all ease-in-out;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
  display: block;
  border: .1px solid white;
}

.blog__image:hover {
  transform: scale(1.05);
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
  transition: 0.5s all ease-in-out;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
  display: block;
  border: .1px solid white;
}

.blog__image:hover {
  transform: scale(1.05);
}

.blog__button {
  display: inline-flex;
  background-color: white;
  padding: 1.15rem;
  border-radius: .5rem 0 .5rem 0;
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  right: 0;
  bottom: 0;
}

.blog__button i {
  transform: rotate(-30deg);
  transition: .4s;
}

.blog__button:hover i {
  transform: rotate(-30deg) translateX(.25rem);
}

.blog__title {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: .75rem;
  cursor: default;
}

.blog__description {
  margin-bottom: 1.5rem;
  cursor: default;
}

.blog__footer,
.blog__reaction {
  display: flex;
  align-items: center;
}

.blog__footer {
  column-gap: 1.5rem;
}

.blog__reaction {
  column-gap: .25rem;
}

.blog__reaction i {
  font-size: 1.25rem;
}

.blog__reaction span {
  font-size: var(--small-font-size);
  cursor: pointer;
}

.bx {
  cursor: pointer;
}


/*=============== Our Machines ===============*/

.machine__container {
  margin-top: 0px;
  border: .11px solid rgb(195, 239, 233);
  background-color: rgba(244, 247, 247, 0.891);
  border-radius: 30px;
  padding: 20px;
  position: relative;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
}

.machine__content {
  row-gap: 3rem;
}

.machine__card {
  border: .11px solid whitesmoke;
  background-color: whitesmoke;
  border-radius: .5rem;
  padding: 20px;
  position: relative;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
}

.machine__image {
  position: relative;
  margin-bottom: 1.5rem;
  transition: 0.5s all ease-in-out;
}

.machine__img {
  border-radius: .5rem;
  display: block;
}

.machine__image:hover {
  transform: scale(1.05);
}

.machine__button {
  display: inline-block;
  background-color: #38afff;
  color: whitesmoke;
  padding: 1rem 1rem;
  font-weight: 500;
  border-radius: 10px;
  transition: .3s;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  margin-left: -10px;
}

.machine__button:hover {
  background-color: #3197db;
}

.machine__button i {
  transition: .4s;
}

.machine__button:hover i {
  transform: translateY(-.15rem) translateX(.15rem);
}

.machine__title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: .75rem;
  cursor: default;
}

.machine__data {
  text-align: center;
  margin-top: 20px;
}

.machine__description {
  margin-bottom: 1.5rem;
  cursor: default;
}

.machine__footer,
.machine__reaction {
  display: flex;
  align-items: center;
}

.machine__footer {
  column-gap: 1.5rem;
  justify-content: center;
}

.machine__reaction {
  column-gap: .25rem;
}

.machine__reaction i {
  font-size: 1.25rem;
}

.machine__reaction span {
  font-size: var(--small-font-size);
  cursor: pointer;
}

.bx {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <!--=============== CSS ===============-->
  <link rel="stylesheet" href="assets/css/styles.css">
  <link rel="stylesheet" href="assets/css/scroll_nav.css">





</head>

<body>

  <!--==================== BLOG ====================-->
  <section class="blog section__blog" id="blog">
    <br/><br/>
    <div class="blog__container container__blog">

      <!--==================== Filter ====================-->
      <br/>

      <div class="filter-buttons">
        <ul id="filter-btns">
          <li class="active2" data-target="all">All</li>
          <li data-target="mach">Machines</li>
          <li data-target="levo">Levonorgestrel</li>
          <li data-target="condoms">Condoms</li>
          <li data-target="fem">Feminine Hygiene</li>
          <li data-target="other">Other</li>

        </ul>
      </div>

      <br/>


      <div class="machine__content grid__blog">




        <article data-id="mach" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/planb-products.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Machine 1
            </h2>
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-machine">
              <a data-target="mach" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>
            </a>

          </div>





        </article>



        <article data-id="levo" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/planb-products.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Levonorgestrel 1
            </h2>
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-levo5">
              <a data-target="levo" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>
            </a>

          </div>





        </article>





        <article data-id="condoms" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/trojanlogo.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Condoms 1
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-condoms">
              <a data-target="condoms" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>

          </div>



        </article>







        <article data-id="fem" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/durextest.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Feminine 1
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-fem">
              <a data-target="fem" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>

          </div>

        </article>



        <article data-id="other" class="machine__container">
          <div class="machine__image">
            <img src="assets/img/durextest.png" alt="chart showing increase in stds" class="machine__img">
          </div>
          <div class="machine__data">
            <h2 class="machine__title">
              Other 1
          </div>

          <br/>

          <div class="machine__footer">
            <div id="filter-other">
              <a data-target="other" href="#filter-btns" class="machine__button">
                <div class="blog__reaction">

                  <span>Alternative</span>

                </div>
              </a>
            </div>

          </div>

        </article>



      </div>
    </div>
  </section>



  <br/><br/><br/>



  </main>




  <!--=============== GSAP ===============-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>


  <!--=============== MAIN JS ===============-->
  <script src="assets/js/main.js"></script>
</body>

</html>

- morganney

Answer 2

注意事项

• 尽可能只进行一次搜索或不进行搜索，因此不应将查询放在运行多次的函数中。
• 使用CSS类而不是直接修改样式，因为浏览器可以优化绘制并减少布局移位/计算。
• 要使我的JS工作，您需要添加以下CSS。

CSS

.machine__container {
  display: block;
}

.machine__container.hide {
  display: none;
}

JS

// Anonymous Function to contain variables
(() => {
    // Find all active Elements
    const filterMenu = [...document.getElementById("filter-btns").children];
    const filterItems = [...document.getElementsByClassName("machine__container")];
    const filterButtons = [...document.getElementsByClassName("machine__button")];

    // Process Click Event
    function handleAction({ currentTarget }) {
        const { target: targetId } = currentTarget.dataset;

        // Loop through menu items
        for (const menuElement of filterMenu) {
            const { target: menuId } = menuElement.dataset;
            if (targetId === menuId) menuElement.classList.add("active2");
            else menuElement.classList.remove("active2");
        }

        // Loop through data items
        for (const itemElement of filterItems) {
            const { id: menuId } = itemElement.dataset;
            if (targetId === "all" || menuId === targetId) itemElement.classList.remove("hide");
            else itemElement.classList.add("hide");
        }
    }

    // Add Event Listners to menu items
    for (const menuElement of filterMenu) {
        menuElement.addEventListener("click", handleAction);
    }

    // Add Event Listners to filter items
    for (const buttonElement of filterButtons) {
        buttonElement.addEventListener("click", handleAction);
    }
})();

- svarlitskiy