getElementsByClassName（'class'）仅用于点击的元素

我有一系列的div类。我想选择用户点击的div内的文本。getElementsByClassName（'class'）仅用于点击的元素

在下面的示例代码，如果用户点击第一个div，安慰出来的文字应该是：“示例文本ONE”

如果在2格的用户点击，它应该是“示例文本TWO “

我可以完成我想有ID和的getElementById（‘ID’）。innerHTML的

div的，但是，我不得不带班，不工作来完成它。

进一步挖：我理解是getElementsByClassName方法返回状物体的阵列，和document.getElementsByClassName [0] .innerHTML将样的工作，但它只返回的第一个元素（“sample_div。”）。也许有一种方法可以用点击的div的索引替换0？

任何方法来做到这一点与类将是伟大的。谢谢。

<!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); 
}

来源

2017-08-25 PolarisTLX

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>

来源

2017-08-25 01:09:54 Frankusky

这给了我很多的工作。谢谢！ – PolarisTLX

getElementsByClassName（'class'）仅用于点击的元素

回答

相关问题