javascript - Data-Target 无法使用 addEventListener

标签 javascript html css filter addeventlistener

选择过滤器类别后，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>

最佳答案

无需对代码进行完全重构，您可以将 click 监听器添加到更新相应 li[ 的 a[data-target] 元素data-target] 具有您想要的样式的元素。

为了方便引用，这里是添加的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>

关于javascript - Data-Target 无法使用 addEventListener，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74202453/

上一篇：php - 为什么我没有收到 FCGI_END_REQUEST 记录？

下一篇：python - 根据另一个 Pandas Dataframe 的日期范围分配周数

相关文章：

javascript - 如何在保持宽高比的同时调整图像的大小以在组中具有相同的高度？

javascript - 在 Jquery 中隐藏和更改 div 元素

css - 第一列的交替颜色

javascript -\0 ("\\0"在 C 风格的正则表达式中)是 C++ 正则表达式中的有效转义序列吗？

javascript - AngularJS 在 ng-repeat 中的反向 OrderBy 返回非反向链接

html - Joomla 模板的响应式站点

html - 在 Edge 浏览器中的图像上投影不起作用

html - 如何使用 flex 将 div 高度设置为其容器的 100% 并保持垂直对齐居中？

css - 在 HTML5 中使部分大小正确

javascript - 查找 JavaScript 对象数组中的属性是否有效

©2024 IT工具网  联系我们