如何使用 Vanilla JS HTML CSS 仅隐藏属于相同 class 个按钮的已单击按钮

Question

我遇到了使用 JS 将 data.json 渲染成 HTML 的情况。一切正常。 Json 数据使用循环渲染到 html 中，这导致多个对象具有相同的 class。

因此，我创建的每个按钮都属于相同的 class 循环。现在的问题；我只想隐藏被单击的特定按钮，而不是 class.

的所有按钮

var X = document.getElementsByClassName("buttons");
function HideClickedButton() {

  for (let x of X) {
    if (x.style.display === "none") {
      x.style.display = "block";
    
    } else {
      x.style.display = "none";
    }
  }
}

for (const button of X) {
    button.addEventListener('click', HideClickedButton);
}

<button class="buttons">Test</button>
<button class="buttons">Test</button>
<button class="buttons">Test</button>
<button class="buttons">Test</button>

上面的代码隐藏了同一个class的所有按钮。

如果仅使用 document.querySelector(".buttons").style.display = "none"

那么无论按哪个按钮，它总是隐藏第一个按钮。

编辑部分：

 <div onclick="addToCart(${product.price})">
    <button class="b1" onclick="hideAddButton(this)" type="button">ADD</button>
  </div>
  <div onclick="addToCartRemove(${product.price})">
    <button class="b2 hidden" onclick="showRemoveButton(this)" type="button">Remove</button>
  </div>

所以。我的代码在 JS 中是这样的，它基本上是从 JSON 渲染列表。渲染后，总计按钮为 12。一组 6 个（见图）。现在，我不想一开始就显示删除按钮。它只会在单击相应的添加按钮时显示。单击添加按钮时，它将隐藏，删除按钮将取代它，而其他添加按钮保持不变。如果你明白了，请告诉我。

Answer 1

您可以使用 onclick="yourfunction(this)" 执行此操作，请参阅下面的代码段。

其他解决方案是使用事件侦听器。

function HideClickedButton(x) {
      x.style.display = "none";
}

<div>
  <button onclick="HideClickedButton(this)" class="buttons">Button 1</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 2</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 3</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 4</button>
</div>

编辑：根据您在评论中提出的问题，这里介绍了如何在单击按钮 8 时切换按钮 1 的显示，反之亦然。哪个 class 是按钮并不重要，因为触发该功能的是 onclick 属性，而不是它们的 class.

function HideClickedButton(x) {
      var parent = x.parentNode;
      var index = [].indexOf.call(parent.children, x);
      //if clicked element is index 0 in parent element's children (button 1)
      if(index==0){
        //show element index 7 (button 8)
        parent.children[7].style.display = "inline-block"; 
      }
      //else if clicked element is index 7 in parent element's children (button 8)
      else if(index==7){
        //hide or show element index 0 (button 1)
        parent.children[0].style.display = "inline-block"; 
      }
      //we hide clicked button
        x.style.display = "none";
}

<div>
  <button onclick="HideClickedButton(this)" class="buttons">Button 1</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 2</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 3</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 4</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 5</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 6</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 7</button>
  <button onclick="HideClickedButton(this)" class="buttons_other_class">Button 8</button>
</div>

Answer 2

您可以为单击按钮添加事件侦听器。

var X = document.getElementsByClassName("buttons");
    X.forEach(function (element) {
        element.addEventListener("click", function () {
            this.style.display = "none";
        })
    })

Answer 3

或者attach a listener to each button and hide the element that was clicked on...

const buttons = document.querySelectorAll('.button');

buttons.forEach(button => {
  addEventListener('click', handleClick)
});

function handleClick(e) {
  e.target.classList.add('hide');
}

.hide { display: none; }

<button class="button">one</button>
<button class="button">two</button>
<button class="button">three</button>
<button class="button">four</button>
<button class="button">five</button>

...或wrap your buttons in a container, use event delegation and only attach one listener to that container (this will capture all the events from its child elements as they "bubble up" the DOM). Check the clicked element has class .button，然后隐藏它。

const buttons = document.querySelector('.buttons');

buttons.addEventListener('click', handleClick);

function handleClick(e) {
  if (e.target.matches('.button')) {
    e.target.classList.add('hide');
  }
}

.hide { display: none; }

<div class="buttons">
  <button class="button">one</button>
  <button class="button">two</button>
  <button class="button">three</button>
  <button class="button">four</button>
  <button class="button">five</button>
</div>

Answer 4

document.querySelector() 只会去 select 匹配 selector 的第一个元素。您需要 document.querySelectorAll() 来获取所有匹配的元素。
但是您可以通过在呈现所有按钮后附加到事件处理程序来更轻松地完成此操作。

你有点暗示被点击的按钮应该消失，而其他按钮应该重新出现。如果不是这种情况，您可以注释掉下面将“其他”按钮的样式更改为块的代码行。

编辑：e.PreventDefault() 和 e.StopPropagation() 用于防止标准按钮单击行为（提交表单等）。如果您不想抑制这种行为，您可以简单地删除这些行。

const buttons = document.getElementsByClassName('buttons');

[...buttons].forEach( (button) => {
   button.addEventListener( 
      'click', 
      (e) => HideClickedButton( e, button ), 
      false 
   );
});

function HideClickedButton( e, button ) {
  [...buttons].forEach( (other) => other.style.display = 'block' );
  e.preventDefault();
  e.stopPropagation();
  button.style.display = 'none';
}

<div>
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
  <button class="buttons">Button 3</button>
  <button class="buttons">Button 4</button>
</div>

如何使用 Vanilla JS HTML CSS 仅隐藏属于相同 class 个按钮的已单击按钮

How to hide only clicked button belonging to same class of buttons using Vanilla JS HTML CSS

html

javascript

css

json