JavaScript 获取所选项目的 TextContent答案

【问题标题】：JavaScript Get Selected Item's TextContentJavaScript 获取所选项目的 TextContent
【发布时间】：2021-03-20 11:30:36
【问题描述】：

我想编写一个程序来写出已单击项目的文本内容。由于某种原因，该程序仅获取最后一个元素的内容。知道我应该在 for 循环中更改什么吗？

var emailname = document.querySelectorAll(".name");

var gSenderName = document.getElementById('sname');

$('.name').click(function() {

  for (var i = 0; i < emailname.length; i++) {
    const sendername = emailname[i].textContent;
    gSenderName.textContent = sendername;

  }

});

.name:hover {
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">first</div><br>
<div class="name">second</div><br>
<div class="name">third</div>
<br>

<div>Selected:
  <div id="sname"></div>
</div>

【问题讨论】：

标签： javascript html jquery for-loop

【解决方案1】：

这里根本不需要循环。您可以使用this 对象简单地获取当前单击元素的文本。我还建议您不要将 vanilla JS 和 jQuery 不必要地混为一谈：

var gSenderName = $('#sname');

$('.name').click(function(){
  gSenderName.text($(this).text());
});

.name:hover {
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">first</div><br>
<div class="name">second</div><br>
<div class="name">third</div>
<br>

<div>Selected: 
  <div id="sname"></div>
</div>

【讨论】：

【解决方案2】：

循环运行并一个接一个地设置每个项目的文本内容。因为每个都覆盖另一个，所以你总是得到最后一个。

只需设置被点击元素的文本内容：

var gSenderName = document.getElementById('sname');

$('.name').click(e => {
  gSenderName.textContent = e.target.textContent;
});

.name:hover {
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">first</div><br>
<div class="name">second</div><br>
<div class="name">third</div>
<br>

<div>Selected:
  <div id="sname"></div>
</div>

【讨论】：