Question

如果div都有相同的类，我如何得到点击的div。举个例子：

import pandas as pd
df = pd.read_csv(file_name)
df_sorted = df.sort_values(by="col_2")

我想在我点击的div中添加另一个类。

JavaScript新手，但我已经发现我应该使用＆＃34;这个＆＃34;以某种方式。

到目前为止我做了什么：

<div class="box"></div>  <div class="box"></div>

但当然这仅适用于具有Id的div，而不适用于多个div。

Answer 1

您可以在此处使用document.querySelectorAll，如：

var boxes = document.querySelectorAll('.box');
Array.from(boxes).forEach(box => {
  box.addEventListener('click', function(e) {
    e.target.classList.toggle('clicked');
  });
});

Answer 2

使用jquery

＆＃13;

$('.box').click(function() {
  console.log($(this).text());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">one</div><div class="box">two</div>

＆＃13;

Answer 3

如果您想使用document.getElementById()，则需要添加id属性元素：

<div id="box1" class="box">

按照设计，id应该是唯一的，所以如果你可以为每个元素分配一个id，那就足够了。

我建议你在父（或整个文档）上添加监听器并检查里面点击的元素的方法：

document.addEventListener('click', function (event) {
    if(event.target.classList.contains('box')) {
        event.target.classList.toggle('clicked');
    }
}

这种方法在性能方面更好，因为它只创建一个事件处理程序，而不是每个元素的处理程序。

Answer 4

如果将eventListener附加到包含元素上，这里我只使用了body，但更有针对性的选择器可以提供更好的性能。

然后，您可以检查点击项目的类别。

以下示例..

document.body.addEventListener("click", function (evt) {
  var el = evt.srcElement;
  if (el.classList.contains("box"))
    el.classList.toggle("clicked");
});

.clicked {
  background-color: yellow;
}

<div class="box">Box 1</div>  
<div class="notabox">Not a Box</div>  
<div class="box">Box 2</div>

Answer 5

如果你想继续使用纯JavaScript而不需要任何额外的lib，我相信Query Selectores会帮助你（https://developer.mozilla.org/pt-BR/docs/Web/API/Element/querySelectorAll）。

发展您的代码：

document.querySelectorAll("box").forEach( function (){
    this.addEventListener('click', function(event) {
        event.target.classList.toggle("clicked");
    });
});

使用具有相同类的多个div将类添加到单击的div

5 个答案: