css 您只需要从集合中创建一个活动按钮

4smxwvx5  于 2023-03-24  发布在  其他
关注(0)|答案(4)|浏览(99)

一般来说，我有3个带按钮的块，当你点击按钮时，图片会被另一个替换，但有必要确保当下一个轨道被激活时，上一个按钮会恢复到原来的状态。

let btn = document.querySelectorAll('.btn-wrapper');

btn.forEach(function(element) {
  element.addEventListener('click', function(e) {

    element.querySelector('.play__btn').classList.toggle('play__btn-hidden');
    element.querySelector('.pause__btn').classList.toggle('pause__btn-active');

  })
})
.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}
<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
</div>
css

4条答案

按热度按时间
hvvq6cgz

hvvq6cgz1#

这里有一个稍微不同的处理方法：

let btn = document.querySelectorAll('.btn');
btn.forEach(function(element) {
  element.addEventListener('click', function(e) {
    btn.forEach((el) => el != e.target && el.classList.remove('btn--pause'));
    e.target.classList.toggle('btn--pause');
  })
})
.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
  background-size: 17px 17px;
}

.btn--play {
  background-image: url("https://cdn-icons-png.flaticon.com/512/153/153752.png");
}

.btn--pause {
  background-image: url("https://cdn-icons-png.flaticon.com/512/1214/1214679.png");
}
<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn btn--play"></div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn btn--play"></div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn btn--play"></div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-03-24
eeq64g8w

eeq64g8w2#

我稍微修改了一下你的脚本：

const btns = document.querySelectorAll(".btn-wrapper");

const resetAllBtns = () => {
  btns.forEach((btn) => {
    // reset all
    btn.querySelector(".play__btn").classList.remove("play__btn-hidden");
    btn.querySelector(".pause__btn").classList.remove("pause__btn-active");
  });
};

const togglePlayStatus = (classList, btnWrapper) => {
  // toggle the state of btn being clicked
  if (classList.contains("play__btn")) {
    classList.add("play__btn-hidden");

    btnWrapper.querySelector(".pause__btn").classList.add("pause__btn-active");
  } else {
    classList.remove("pause__btn-active");
    btnWrapper.querySelector(".play__btn").classList.remove("play__btn-hidden");
  }
};

const onClick = (e) => {
  const btnWrapper = e.target.parentElement;
  const classList = e.target.classList;

  resetAllBtns();
  togglePlayStatus(classList, btnWrapper);
};

btns.forEach(function(element) {
  element.addEventListener("click", (e) => onClick(e));
});
.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}
<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn" />
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn" />
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn" />
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn" />
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn" />
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn" />
    </div>
  </div>
</div>

现在的情况是
1.我们将所有按钮重置为原始播放状态。
1.一旦所有的按钮都被重置，我们切换被点击的按钮的状态。为此，我们使用e.target.parentElement来定位btn-wrapper，然后定位 Package 器内的按钮。然后我们添加/删除适当的类。
希望这能有所帮助！

赞(0）分享  回复(0）举报  2023-03-24
kzmpq1sx

kzmpq1sx3#

你可以这样做：

function reset() {

 document.querySelectorAll('.play__btn').forEach(function (element) {
element.classList.remove('play__btn-hidden');
});

document.querySelectorAll('.pause__btn').forEach(function (element){
element.classList.remove('pause__btn-active');
});
}

let btn = document.querySelectorAll('.btn-wrapper');

btn.forEach(function(element) {
  element.addEventListener('click', function(e) {

    reset();
element.querySelector('.play__btn').classList.toggle('play__btn-hidden');
    element.querySelector('.pause__btn').classList.toggle('pause__btn-active');

  })
})
.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}
<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-03-24
of1yzvn4

of1yzvn44#

我简化了你的代码版本。如果你只想改变可见性，就不需要在两个元素上切换类。
只需过滤按钮集合中的活动项并将其删除。

let btn = document.querySelectorAll('.btn-wrapper');
const activeClass = 'active'

btn.forEach(function(element) {
  element.addEventListener('click', function(e) {
    element.classList.toggle(activeClass)
    const activeBtns = Array.from(btn).filter(el => el != element && el.classList.contains(activeClass))
    if (activeBtns.length) {
      activeBtns.forEach(el => {
            el.classList.remove(activeClass)
      })
    }
 })
})
.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.btn-wrapper .play__btn {
  display: block;
}

.btn-wrapper .pause__btn {
  display: none;
}

.btn-wrapper.active .play__btn {
  display: none;
}

.btn-wrapper.active .pause__btn {
  display: block;
}
<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-03-24
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com