首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

向循环内动态生成的DIVs添加一个click事件,该循环显示一个弹出窗口,其中每个DIVs在Javascript中具有不同的文本

在Javascript中,可以通过以下步骤向循环内动态生成的DIVs添加一个click事件,并在点击时显示一个弹出窗口,其中每个DIV具有不同的文本:

  1. 首先,确保每个动态生成的DIV都具有一个唯一的标识符或类名,以便能够选择它们并添加事件监听器。可以使用类名来选择这些DIV。
  2. 使用Javascript的querySelectorAll方法选择所有具有相同类名的DIV元素。例如,如果每个DIV都具有类名"dynamic-div",可以使用以下代码选择它们:
代码语言:txt
复制
const divs = document.querySelectorAll('.dynamic-div');
  1. 使用forEach方法遍历选中的DIV元素,并为每个DIV添加一个click事件监听器。在事件监听器中,可以执行所需的操作,例如显示弹出窗口。同时,可以根据每个DIV的文本内容进行不同的处理。

下面是一个示例代码,演示如何向循环内动态生成的DIVs添加click事件,并在点击时显示一个弹出窗口,其中每个DIV具有不同的文本:

代码语言:txt
复制
// 选择所有具有相同类名的DIV元素
const divs = document.querySelectorAll('.dynamic-div');

// 为每个DIV添加click事件监听器
divs.forEach((div) => {
  div.addEventListener('click', () => {
    // 获取当前DIV的文本内容
    const text = div.textContent;
    
    // 在这里执行弹出窗口的显示操作,可以使用浮层、模态框等方式展示
    // 可以根据文本内容进行不同的处理
    
    // 示例:使用alert显示文本内容
    alert(text);
  });
});

在上述示例中,我们使用querySelectorAll方法选择了所有具有类名"dynamic-div"的DIV元素,并使用forEach方法为每个DIV添加了一个click事件监听器。在事件监听器中,我们获取了当前DIV的文本内容,并执行了一个简单的弹出窗口显示操作,使用alert方法显示了文本内容。

请注意,这只是一个示例,你可以根据实际需求进行相应的修改和扩展。另外,关于弹出窗口的显示方式,可以根据具体情况选择适合的方法,例如使用浮层、模态框等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript进阶内容——DOM详解

JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到行为。...页面每个元素都可以产生某些触发JavaScript事件,简单来说就是产生:触发——响应机制 事件三要素 我们把事件分为三部分: 事件事件被触发对象 事件类型 如何触发,例如点击onclick...: 用来获得元素,且具有逻辑性地获得元素 节点概述: 节点操作主要操作时元素节点操作 页面所有内容都是节点,DOM,节点使用node表示 HTML DOM中所有节点均可以通过JavaScript...指定HTML元素 因为元素原先不存在,是根据我们需求动态生成,所以称为动态创建元素节点 添加节点 node.appendChild(child) 将一个节点添加到指定父节点末尾 添加节点到指定位置...,需要插入节点 事件高级内容 我们在前面已经掌握了事件基本方法,接下来我们来学习进阶内容: 注册事件概述 给元素添加事件,被称为注册事件或者绑定事件 注册事件有两种方法: 传统注册方法: 注册事件具有唯一性

1.4K20

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)

、与弹出框有关:                        alert(),显示有一段消息或警告窗口;                        confirm(),显示一段消息以及确认和取消按钮对话框...3)Node对象,是其他5个对象父对象 特点:所有dom对象都可以被认为是一个节点; 方法:1、CRUD dom树:                     appendChild(),节点子节点列表结尾添加子节点...,通过元素属性className属性来设置class属性值,应用较多; 5、动态表格案例实战 1)添加表格实现思路: * 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td,设置...td文本文本内容 * 4、创建tr,将td添加到tr * 5、获取table,将tr添加到table 2)删除表格实现思路: * 1、确定点击是哪一个超链接 * 2、再删除 <...* 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td,设置td文本文本内容 * 4、创建tr,将td添加到tr

2.2K40

Python 基于 selenium 实现不同商城商品价格差异分析系统

本文将使用 selenium 自动模拟用户搜索行为,获取不同商城上同类型商品价格信息,最终生成商品不同商城上价格差对比表。...使用 selenium 首页文本搜索框自动输入商品关键字,然后自动触发搜索按钮点击事件,进入商品列表页面。 使用 selenium 分析、爬取不同商城中商品列表页面商品名称和价格数据。...click() 方法,模拟用户点击操作,此操作会打开新窗口,并以列表方式显示搜索出来商品数据。...search_button.click() selenium 接收到浏览器打开新窗后反馈后,可以使用 window_handles 属性获取浏览器已经打开所有窗口,并以列表方式存储每一个窗口操作引用...刚开始是首页窗口操作,现在要在搜索结果窗口中进行操作,所以要切换到刚打开窗口。使用负索引得到刚打开窗口(刚打开窗口一定是最后一个窗口)。

1.6K20

JavaScript

JavaScript 基础认识 弹出提示对话框:alert(“弹出对话框”) 解释型语言,一行一行解释。...:添加或删除 1.添加 push(); 2.删除 数组索引方法: 函数 声明和调用:function 第一行function getSum后面括号num1和num2是形参。...), innerHtml获取元素加内容,(保留空格和换行) 案例:密码框显示,隐藏密码 html css js ---- DOM核心重点 获取过来DOM元素是一个对象所以称为文档对象模型...Propagation 传播 下列代码为例,当点击父盒子son盒子时,不阻止事件冒泡,会发生弹出三个提示框(son、father和document),阻止事件冒泡后,父亲元素不在冒泡弹出框。...('click', function(e) { // 1. client 鼠标可视区x和y坐标 console.log(e.clientX);

1.2K70

「Web编程API」- 03

DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div父元素,甚至整个页面。...DOM 事件流会经历3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 我们水里面扔一块石头,首先它会有一个下降过程,这个过程就可以理解为从最顶层事件发生最具体元素(目标点)捕获过程;之后会产生泡泡...所以,事件处理函数声明1个形参用来接收事件对象。 事件对象兼容性处理 事件对象本身获取存在兼容问题: 标准浏览器是浏览器给方法传递参数,只需要定义形参 e 就可以获取到。...常情况下terget 和 this是一致,但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行),这时候this指向是父元素,因为它是绑定事件元素对象...什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理, jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素事件执行。

1.4K50

前端成神之路-WebAPIs03

03 - Web APIs 学习目标: 能够使用removeChild()方法删除节点 能够完成动态生成表格案例 能够使用传统方式和监听方式给元素注册事件 能够说出事件流执行三个阶段 能够事件处理函数获取事件对象...DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div父元素,甚至整个页面。...DOM 事件流会经历3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 ​ 我们水里面扔一块石头,首先它会有一个下降过程,这个过程就可以理解为从最顶层事件发生最具体元素(目标点)捕获过程...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素事件执行。 生活代理: ? js事件代理: ?

2.9K20

JS-选项卡制作解释部分

分别是0, 1, 2.对应到html,就是第一个li、第二个li、第三个liclassName都成了0.这样先全部清除掉,到了下边j循环外,this.className处,再把点击对应li加上className...把他们样式去掉。现在恍然,这种“打扫完屋子再请客”思维,先把所有的都去掉,再想给谁添加就给谁添加就可以了呀!看来以后,想拿起什么东西前,得先学会把放下放下。不然,难为只有自己。...分别是0,1,2.对应到html,就是第一个li、第二个li、第三个liclassName都成了0.这样先全部清除掉,到了下边j循环外,this.className处,再把点击对应li加上className...把他们样式去掉。现在恍然,这种“打扫完屋子再请客”思维,先把所有的都去掉,再想给谁添加就给谁添加就可以了呀!看来以后,想拿起什么东西前,得先学会把放下放下。不然,难为只有自己。...,但是 【父元素.childNodes】方法缺点是还有空文本在里面,需要你经过判断li1[i].nodeType==1(如下for循环处).至于ByTagName方法,取巧【父元素.getElementsByTagName

1.9K20

事件高级

冒泡阶段   我们水里面扔一块石头,首先它会有一个下降过程,这个过程就可以理解为从最顶层事件发生最具体元素(目标点)捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡...事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即 DOM 事件流。 注意   1. JS 代码只能执行捕获或者冒泡其中一个阶段。   ...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行),  这时候this指向是父元素,因为它是绑定事件元素对象...生活代理: 咱们班有100个学生, 快递员有100个快递, 如果一个送花费时间较长。同时每个学生领取时候,也需 要排队领取,也花费时间较长,何如?...知否知否,应该有弹框在手 知否知否,应该有弹框在手 点击每个 li 都会弹出对话框,以前需要给每个 li 注册事件,是非常辛苦

1.2K10

深入理解作用域和闭包

上述示例代码,obj与tomObj都指向了堆内存一个位置,tomObj指针指向了obj,深入理解原型链与继承 文章,我们知道对象是拥有原型链,因此当我们obj添加了name属性,tomObj...执行上下文JavaScript一个比较重要概念,它采用栈作为数据结构,为了方便起见,本文简称它为上下文,它规则如下: 变量或函数上下文决定它们能访问哪些数据 每个上下文都会关联一个变量对象...= function() { alert(i); }; } }; 上述代码,我们获取了页面所有div标签,循环每个标签绑定点击事件,由于点击事件是被异步触发...,当事件触发时,for循环早已结束,此时变量i值已经是6,所以div点击事件函数顺着作用域链从到外查找变量i时,找到值总是6。...() { alert(i); }; })(i); } }; 上述代码for循环内部,我们用了一个自执行函数,把每次循环i值都封闭起来 当在事件函数顺着作用域链查找变量

50930

JS起步阶段随笔【JavaScript

; 原生JS标签定位方法 getElementsBytagName(); 方法可以获取某标签类型所有元素,其返回值就是一个伪数组(数组模样,但没有数组方法),例如: var divs...,函数内部可以用this,标签可以用,拿出去以后,就达不到想要效果了,因为它所属环境变了。...只for()循环中可用,而 var是对于包围for循环整个函数可用 function f1(){ // i 对于for循环范围是不可见(i is not defined)...for(var i = 1;i<5; i++){ // i for 整个函数体内都是可见 } // i 对于for循环范围是可见 } 实现单选框 你只要确认它们...如果在 label 元素点击文本,就会触发此控件。就是说,当用户选择标签时,浏览器就会自动将焦点转到和标签相关表单控件上。

51020

JavaScript闭包原理与用法实例

原因:onclick事件是异步触发,当事件被触发时,for循环早已结束,此时变量i值早已经是5。 解决:闭包帮助下,把每次循环i值都封闭起来。...当事件函数顺着作用域链从到外查找变量i时,会先找到被封闭闭包环境i,单击div时,会分别输出0,1,2,3,4。...一个内部函数是不能直接从外部函数访问到这两个变量。可以通过将this对象存储一个变量来解决这个问题。把外部作用域中this对象保存在一个闭包能够访问到变量里,就可以让闭包访问对象了。...,并且闭包引用变量消除了循环引用,但是仅仅做到这一步还不能解决内存泄漏问题,闭包会引用包含函数所有活动对象,包含element,即使闭包不直接引用element,包含函数活动对象也仍然会保存一个引用...,这样既可以执行其中代码,又不会在内存留下对该函数引用。

57340

Python爬虫:动态爬取QQ说说并生成词云,分析朋友状况

今天我们要做事情是使用动态爬虫来爬取QQ空间说说,并把这些内容存在txt,然后读取出来生成云图,这样可以清晰看出朋友状况。 这是好友QQ空间10年说说内容,基本有一个大致印象了。 ?...爬取动态内容 因为动态页面的内容是动态加载出来,所以我们需要不断下滑,加载页面 切换到当前内容frame,也有可能不是frame,这里需要查看具体情况 获取页面源数据,然后放入xpath,然后读取...,因为下一页按钮是动态变化,这里需要动态记录一下 driver.find_element_by_id('pager_next_' + str(next_num)).click()...# “下一页”id next_num += 1 # 因为在下一个循环里首先还要把页面下拉,所以要跳到外层frame上 driver.switch_to.parent_frame...并且存到了同级目录 生成词云 生成词云需要用到库: wordcloud, 生成词云 matplotlib, 生成词云图片 jieba ,这个库可用可不用,但我因为中文一直显示不出来,后来加上了这个库

1.5K10

JavaWeb day3 JavsScript 入门

图片 而我们只讲解 length 属性,数组可以动态获取数组长度。...: String对象提供了很多属性,下面给大家列举了一个属性 length ,属性是用于动态获取字符串长度 函数: String对象提供了很多函数(方法),下面给大家列举了两个方法。...图片 String对象还有一个函数 trim() ,方法文档没有体现,但是所有的浏览器都支持;它是用来去掉字符串两端空格。...HTML DOM: 针对 HTML 文档标准模型 标准是核心 DOM 基础上,对 HTML 每个标签都封装成了不同对象 例如: 标签在浏览器加载到内存时会被封装成 Image...,有一个按钮元素,我们是标签上定义 事件属性,事件属性绑定函数。

7.4K10

事件高级

事件侦听注册事件 addEventListener   // (1) 里面的事件类型是字符串 必定加引号 而且不带on   // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div父元素,甚至整个页面。 ​...DOM 事件流会经历3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 我们水里面扔一块石头,首先它会有一个下降过程,这个过程就可以理解为从最顶层事件发生最具体元素(目标点)捕获过程...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素事件执行。 生活代理: ? js事件代理: ?

1.3K20

事件高级

事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...DOM 事件流会经历3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 我们水里面扔一块石头,首先它会有一个下降过程,这个过程就可以理解为从最顶层事件发生最具体元素(目标点)捕获过程...事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。 注意 1. Js代码只能执行捕获或者泡其中一个阶段。 2. onclick和attachEvent 只能得到冒泡阶段。...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素事件执行。 生活代理: 咱们班有100个学生,快递员有100个快递, 如果一个送花费时间较长。

1.5K41

爬虫篇|动态爬取QQ说说并生成词云,分析朋友状况

今天我们要做事情是使用动态爬虫来爬取QQ空间说说,并把这些内容存在txt,然后读取出来生成云图,这样可以清晰看出朋友状况。 这是好友QQ空间10年说说内容,基本有一个大致印象了。 ?...爬取动态内容 因为动态页面的内容是动态加载出来,所以我们需要不断下滑,加载页面 切换到当前内容frame,也有可能不是frame,这里需要查看具体情况 获取页面源数据,然后放入xpath,然后读取...,因为下一页按钮是动态变化,这里需要动态记录一下 driver.find_element_by_id('pager_next_' + str(next_num)).click()...# “下一页”id next_num += 1 # 因为在下一个循环里首先还要把页面下拉,所以要跳到外层frame上 driver.switch_to.parent_frame...并且存到了同级目录 生成词云 生成词云需要用到库: wordcloud, 生成词云 matplotlib, 生成词云图片 jieba ,这个库可用可不用,但我因为中文一直显示不出来,后来加上了这个库

84010
领券