javascript 使用集合通过onclick切换显示

bybem2ql 于 2023-03-28 发布在 Java

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

我想知道基于下面的代码，我如何才能使一个函数的最佳方式，我可以使用我的按钮上显示内容的类中的每个元素一个数组，如果这是有意义的？现在，当我按下它显示所有的div的内容，我只想显示我的按钮所属的一个。
我也尝试过为按钮创建一个类，并通过它们进行循环，但我就是不明白如何做到这一点。

function MyFunction(){
    
    let x = document.getElementsByClassName("one");

    for(i=0; i<x.length; i++){
        
        if (x[i].style.display === "block") {
            x[i].style.display = "none";
          } else {
            x[i].style.display = "block";
          }
    }
    
   
};

.one{
    display: none;
}

<h1>Testing</h1>
        <div class="one">
            <p>Some text</p>
        </div>
        <button onclick="MyFunction()">Show more!</button>
    </div>
    <div>
        <h1>Testing</h1>
        <div class="one">
            <p>Some other text</p>
        </div>
        <button onclick="MyFunction()">Show more!</button>
    </div>

JavaScript

来源：https://stackoverflow.com/questions/75850947/toggle-display-with-onclick-using-collections

2条答案

按热度按时间

eqzww0vc1#

您可以在所有按钮上循环，为每个按钮附加一个事件侦听器，并在事件处理程序中的按钮父级中使用类'one'切换元素的可见性。

document.querySelectorAll('.open-btn').forEach(btn =>
  btn.addEventListener('click', e => {
    btn.parentElement.querySelector('.one').classList.toggle('hide');
  })
);

.hide {
  display: none;
}

<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>
<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some other text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>

或者，您可以使用事件委托，只将事件侦听器附加到最近的静态祖先（这里使用document作为示例，但您应该选择一个更近的静态祖先）。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-03-28

bvn4nwqk2#

1.将所有内容 Package 在元素¹中，并将其注册到“click”事件。在下面的示例中，使用了<main>元素。当单击<nain>时，将调用事件处理程序toggleDiv。

const main = document.querySelector("main");

main.addEventListener("click", toggleDiv);

1.事件处理程序toggleDiv被设计为将“click”事件委托给特定元素，并忽略其余元素。在下面的示例中，只有单击的<buttons>会做出React。有关详细信息，请参阅示例中的注解。
1.这种编程范例被称为**事件委托***，其中单个元素² * 侦听 * 当在其自身和/或其内的任何元素上触发时注册的事件。（s）³对直接在其上触发的已登记事件作出React的范围可能很广（例如div），特定（例如#IdOfElement），或介于两者之间的任何内容（例如.classNameOfElements）。这种元件的数量是无限的。此外，也包括以后动态添加的元素。这意味着在页面加载时创建或存在的每个元素都不需要eventListener。
¹ 元素/对象 * 也可以是<body>、<html>、document和window。
²event.currentTarget
简体中文

示例

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 使用集合通过onclick切换显示

2条答案

相关问题

热门标签

最新问答