Question

我有一系列带有课程的div。我想选择用户点击的div中的文本。

在下面的示例代码中，如果用户点击第一个div，则安慰的文本应为：“示例文本ONE”

如果用户点击第二个div，则应为“Sample text TWO”

我可以用拥有Id和getElementById（'id'）的div来完成我想要的东西.innerHTML

但是我被迫用类完成它，这不起作用。

进一步挖掘：我理解getElementsByClassName返回一个像object这样的数组，而document.getElementsByClassName（“。sample_div”）[0] .innerHTML会起作用，但它只返回第一个元素。也许有一种方法可以用点击的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);
}

Answer 1

this将包含点击的元素

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

没有JQuery，它应该是这样的：

＆＃13;

//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)
  })
}

＆＃13;

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

＆＃13;

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

1 个答案: