getElementsByClassName('class') 仅用于被点击的元素

Question

我有一系列 div 和类。我想 select 用户点击的 div 中的文本。

在下面的示例代码中，如果用户点击第一个 div，控制台输出的文本应该是："Sample text ONE"

如果用户点击第2个div，应该是"Sample text TWO"

我可以使用具有 Id 和 getElementById('id').innerHTML 的 divs 来完成我想要的

但我被迫用类完成它，这是行不通的。

进一步挖掘：我知道 getElementsByClassName returns 一个类似对象的数组， document.getElementsByClassName(".sample_div")[0].innerHTML 会起作用，但它只 returns第一个元素。也许有一种方法可以将 0 替换为单击的 div 的索引？

任何使用类的方法都会很棒。谢谢。

<!DOCTYPE html> <html>  

<div class='sample_div'>Sample text ONE</div>
<div class='sample_div'>Sample text TWO</div>

</html>

<script type="text/javascript">    

const divs = document.querySelectorAll('.sample_div');

divs.forEach(divSelect => divSelect.addEventListener('click', notice));

function notice() {
  let text = document.getElementsByClassName('.sample_div').innerHTML;
  console.log(text);
}

Answer 1

this 将包含点击的元素

使用 jquery，您可以创建一个监听所有 .sample_div 的事件监听器，并使用 this 变量引用它。

$(".sample_div").click(function(){
  console.log(this.innerHTML)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sample_div'>Sample text ONE</div>
<div class='sample_div'>Sample text TWO</div>

没有JQuery应该是这样的：

//Get all the elements with the class "sample_div"
var sampleDivs = document.getElementsByClassName("sample_div")

//Iterate over the sampleDivs node array
for(var x=0, sampleDivsLength = sampleDivs.length; x<sampleDivsLength;x++){
  //Add an event listener for each DOM element
  sampleDivs[x].addEventListener("click",function(){
    console.log(this.innerHTML)
  })
}

<div class='sample_div'>Sample text ONE</div>
    <div class='sample_div'>Sample text TWO</div>

getElementsByClassName('class') 仅用于被点击的元素

getElementsByClassName('class') for ONLY the element that is clicked on

select

element

click

getelementsbyclassname