有没有办法查看是否有人点击了某个类的div？

html5 • • 问答

我一直试图找到一种方法来自动化这个非常简单的问题，这让我发疯了。我有将某个类的显示设置为无的代码。但是，我想用其他几个都有这个类的 div 来做到这一点。我想要的是，当我单击此类的任何 div 时，该单个 div 消失。为糟糕的可读性道歉。

HTML：

<body>
  <div>

    <div>

        <div>
            <h1>1</h1>
        </div>

        <div>
            <h1>2</h1>
        </div>
        <div>
            <h1>3</h1>
        </div>
        <div>
            <h1>4</h1>
        </div>
        <div>
            <h1>5</h1>
        </div>
        <div>
            <h1>6</h1>
        </div>
        <div>
            <h1>7</h1>
        </div>
        <div>
            <h1>8</h1>
        </div>
        <div>
            <h1>9</h1>
        </div>
        <div>
            <h1>10</h1>
        </div>
        <div>
            <h1>11</h1>
        </div>
        <div>
            <h1>12</h1>
        </div>
    </div>
  </div>
<body>

CSS：

<body>
  <div class="section">

    <div class="bontainer">

        <div class="tbclicked clickone">
            <h1 class="one">1</h1>
        </div>

        <div class="tbclicked clicktwo">
            <h1 class="two">2</h1>
        </div>
        <div class="tbclicked clickthree">
            <h1 class="three">3</h1>
        </div>
        <div class="tbclicked clickfour">
            <h1 class="four">4</h1>
        </div>
        <div class="tbclicked clickfive">
            <h1 class="five">5</h1>
        </div>
        <div class="tbclicked clicksix">
            <h1 class="six">6</h1>
        </div>
        <div class="tbclicked clickseven">
            <h1 class="seven">7</h1>
        </div>
        <div class="tbclicked clickeight">
            <h1 class="eight">8</h1>
        </div>
        <div class="tbclicked clicknine">
            <h1 class="nine">9</h1>
        </div>
        <div class="tbclicked clickten">
            <h1 class="ten">10</h1>
        </div>
        <div class="tbclicked clickeleven">
            <h1 class="eleven">11</h1>
        </div>
        <div class="tbclicked clicktwelve">
            <h1 class="twelve">12</h1>
        </div>
    </div>
  </div>
<body>

JS：

.tbclicked {
  background-color: #fff0c9;
}

回答

您可以使用所需的类遍历所有元素，并click为每个元素添加一个事件侦听器：

const tbclicked = document.querySelectorAll('.tbclicked');
tbclicked.forEach((e) => e.addEventListener('click', ()=>{ e.style.display = "none"}));
.tbclicked {
  background-color: #fff0c9;
}
.tbclicked {
  background-color: #fff0c9;
}
<div>
    <div>
        <h1>1</h1>
    </div>

    <div>
        <h1>2</h1>
    </div>
    <div>
        <h1>3</h1>
    </div>
    <div>
        <h1>4</h1>
    </div>
    <div>
        <h1>5</h1>
    </div>
    <div>
        <h1>6</h1>
    </div>
    <div>
        <h1>7</h1>
    </div>
    <div>
        <h1>8</h1>
    </div>
    <div>
        <h1>9</h1>
    </div>
    <div>
        <h1>10</h1>
    </div>
    <div>
        <h1>11</h1>
    </div>
    <div>
        <h1>12</h1>
    </div>
</div>

或者使用事件委托（推荐）：

document.addEventListener("click", function(e){
  if(e.target.parentElement.classList.contains("tbclicked")){
    e.target.style.display = "none";
  }
})
<div>

    <div>
        <h1>1</h1>
    </div>

    <div>
        <h1>2</h1>
    </div>
    <div>
        <h1>3</h1>
    </div>
    <div>
        <h1>4</h1>
    </div>
    <div>
        <h1>5</h1>
    </div>
    <div>
        <h1>6</h1>
    </div>
    <div>
        <h1>7</h1>
    </div>
    <div>
        <h1>8</h1>
    </div>
    <div>
        <h1>9</h1>
    </div>
    <div>
        <h1>10</h1>
    </div>
    <div>
        <h1>11</h1>
    </div>
    <div>
        <h1>12</h1>
    </div>
</div>

以上是有没有办法查看是否有人点击了某个类的div？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>