javascript - 如何使用Javascript获取具有类名的几个段落的值?
问题描述
我想p
通过使用类名单击该 div 来获取包含在 div 中的段落 () 的文本。我尝试使用innerText
,innerHTML
但它undefined
在控制台中返回。我怎样才能只使用 Javascript 来做到这一点?
HTML
<div class="showName">
<p class="paragraphs">Text 1</p>
</div>
<div class="showName">
<p class="paragraphs">Text 2</p>
</div>
<div class="showName">
<p class="paragraphs">Text 3</p>
</div>
Javascript
const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');
Array.prototype.forEach.call(showName, function(element) {
element.addEventListener('click', function() {
// How can I do it here?
});
});
解决方案
工作示例:https ://codepen.io/shinaBR2/pen/qBbxRgz 基本代码是
Array.prototype.forEach.call(showName, function(element) {
element.addEventListener('click', function() {
// How can I do it here?
const text = element.querySelector('.paragraphs').textContent;
alert(text);
});
});
推荐阅读
- tfs-workitem - 新的自定义字段未显示在 Web 布局中,并且“启用新工作项表单”未显示在 TFS 2018 集合设置中
- python - 在 python matplotlib 中绘制 x 轴的空格日期
- git - `.gitignore` 中 `directName` 和 `directName/` 的区别
- php - XAMPP 不会启动 Apache 和 MySql 服务器
- pywinauto - 如何通过pywinauto控制具有不同PID但来自同一程序的多个窗口
- angular - 打字稿:我怎样才能简单地将数组数组转换为类型的对象
- javascript - 反应:Google Map API 不使用传递的 Lon 和 Lat 来呈现地图
- node.js - 从 NodeJS 中的对象数组的选项列表生成变体的高性能方法(10,000 多个潜在变体)
- r - 使用 mapply 划分 R 中的矩阵列表
- html - 为什么 html 元素以意想不到的顺序呈现?