jquery 如何使用一个JS函数在不同的按钮之间切换classList？

guykilcj 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(93)

我试图建立一个简单的添加到购物车容器，也恰好在产品大小之间切换。
然而，我似乎不能使这一工作，没有写不同的功能，为每个这些按钮。
下面是JS：

const sizeBtn = document.getElementById("sizebutton");
const sizeBtnTwo = document.getElementById("sizebutton1");
const sizeBtnThree = document.getElementById("sizebutton2");

sizeBtn.addEventListener('click', sizeBtnActive);
sizeBtnTwo.addEventListener('click', sizeBtnActive);
sizeBtnThree.addEventListener('click', sizeBtnActive);

function sizeBtnActive () {
  sizeBtn.classList.toggle('active');
  sizeBtnTwo.classList.toggle('active');
  sizeBtnThree.classList.toggle('active');
}

上下文的CSS：

.size-btn.faded,
.size-btn.active {
  font-size: 12px;
  color: #c2c2c2;
  background-color: #f0f0f0;
  width: 38px;
  height: 42px;
  border-radius: 0.5rem;
  border: none;
  margin-right: 10px;
  margin-bottom: 35px;
  cursor: none;
}

.size-btn.active {
  color: #ffff;
  background-color: #000000;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  transition: 1.5s ease;
  cursor: pointer;
}

这个代码可能是可怕的，你的指导将不胜感激.
我试着在谷歌上搜索类似的问题，但到目前为止没有一个有效。我希望能够在每个按钮之间切换，而不是他们所有的一次激活。

jquery

来源：https://stackoverflow.com/questions/77128441/how-can-i-toggle-classlist-between-different-buttons-using-the-one-js-function

2条答案

按热度按时间

kognpnkq1#

您可以创建一个按钮组，其作用类似于单选按钮组。
只需在组中的活动按钮上切换数据属性。

// Add global button group listener
window.addEventListener('click', (e) => {
  if (e.target.closest('.button-group')) {
    toggleButtonGroup(e.target);
  }
});

// Log the new value, after each change
document.querySelector('.size').addEventListener('click', (e) => {
  setTimeout((buttonGroup) => {
    console.log('Value:', getButonGroupValue(buttonGroup));
  }, 100, e.currentTarget);
});

// Toggle active state of buttons
function toggleButtonGroup(button) {
  const buttonGroup = button.closest('.button-group');
  buttonGroup.querySelectorAll('button').forEach((currButton) => {
    if (currButton === button && !currButton.dataset.active) {
      currButton.dataset.active = true;
    } else {
      delete currButton.dataset.active;
    }
  });
}

// Value accessor
function getButonGroupValue(buttonGroup) {
  return buttonGroup?.querySelector('[data-active]')?.value;
}

.button-group {
  display: inline-flex;
  border: thin solid grey;
  width: fit-content;
}

.button-group button {
  background: #CCC;
  border: none;
  min-width: 2.5rem;
  padding: 0.25rem;
}

.button-group button:hover {
  background: #DDA;
  cursor: pointer;
}

.button-group button[data-active] {
  background: #FFF;
}

.button-group button[data-active]:hover {
  background: #FFA;
}

<label>Size: </label>
<div class="button-group size">
  <button type="button" value="xs">XS</button>
  <button type="button" value="s">S</button>
  <button type="button" value="m" data-active>M</button>
  <button type="button" value="l">L</button>
  <button type="button" value="xl">XL</button>
  <button type="button" value="xxl">XXL</button>
</div>

赞(0）回复(0）举报 2023-10-17

vxbzzdmp2#

我希望能够在每个按钮之间切换，而不是他们所有的一次激活。
最短的方法是首先给予所有按钮一个通用的类名。

<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>

然后我们使用querySelectorAll立即获取这些按钮，并执行forEach循环，首先禁用所有按钮，然后激活选中的按钮：

const btns = document.querySelectorAll(".btn")

function disableAllButtons() {
    btns.forEach(btn => {
        btn.classList.remove("active")
    })
}

btns.forEach(btn => {
    btn.addEventListener(() => {
        disableAllButtons()

        btn.classList.add("active")
    })
})

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 如何使用一个JS函数在不同的按钮之间切换classList？

2条答案

相关问题

热门标签

最新问答