js动态渲染元素，点击每个元素获取元素的对应的文字

最新推荐文章于 2021-06-08 14:38:46 发布
最新推荐文章于 2021-06-08 14:38:46 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39351190/article/details/88016100
版权

昨天帮人解决了一个问题

以为是个小问题，没想到用上了闭包

看代码

我以为这样就能解决问题，却发现 每次点击的时候 最后一个元素没有点击事件

然后一系列的调试，怎么调试就不说了，无奈只能使用闭包的解决方法

总算把问题解决了，如果大家还有更好的方法 欢迎评论。

一起前端的道路上共同进步，成为别人口中的前端工程师

猿计划
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 动态渲染页面爬取(二) —— 基于 Splash
Amo Xiang的博客
12-15 3035
目录一、安装 Splash二、Splash 的使用 一、安装 Splash Splash 是一个 JavaScript 渲染服务，是一个含有 HTTP API 的轻量级浏览器，它还对接了 Python 中的 Twisted 库和 QT 库。利用它，同样可以爬取动态渲染的页面。利用 Splash，可以实现如下功能： 异步处理多个网页的渲染过程； 获取渲染后页面的源代码或截图。 通过关闭图片渲染或者使用 Adblock 规则的方式加快页面渲染的速度； 执行特定的 JavaScript 脚本； 通过 Lua 脚
js for循环渲染数组绑定点击事件获取对应点击对象的值
qq_41241504的博客
08-16 3382
<!DOCTYPE > <html> <head> <meta charset="UTF-8"> <title>标题</title> <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script&...
this.$refs 动态渲染文本内容_JavaScript动态创建div并写入文本
weixin_39815435的博客
01-22 530
介绍一下如何利用JavaScript动态创建div元素，然后在其中写入文本。代码实例如下：<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <...
html动态追加文本内容,Js动态添加的html内容怎样用css渲染
weixin_36156325的博客
06-02 459
你在html中给的是 而你的css 是 .list label当然没效果了。改一下，把css的改成：#list label {color: red;font-family: Open Sans Condensed;font-size: 16px;}#list input [type="checkbox"] {margin-left: unset;}[更新]css:#list{text-align...
JS获取动态添加的元素
weixin_42839080的博客
10-14 1万+
在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: // 1. 在模板引擎里面添加行内事件 // 2. 利用事件的委托获取(常用) // 3. 在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. &lt;!-- 1.准...
js将一个元素中的所有子元素移动到另一个元素中
Syclifer的博客
02-02 1209
var s1 = document.getElementById("s1").getElementsByClassName("swiper-slide"); var s2 = document.createElement('div'); s2.id = 's2'; s2.className = 'swiper-wrapper'; document.getElementById("c").appendChild(s2); for(let i = 0;i<s1.length;i++){ s2.appen
对layui中表单元素的使用详解
10-18
在Layui中，为了更好地组织和控制表单元素，通常会在每个表单元素外层包裹一层`<div>`或`<form>`标签，并赋予特定的类名，例如`layui-input-block`。例如，创建一个单选框，可以这样写： ```html 男"> ``` ...
JS实现数据动态渲染的竖向步骤条
10-15
在本文中，我们将探讨如何使用JavaScript（JS）实现数据动态渲染的竖向步骤条。这个功能常用于展示流程或任务的进度，例如在电子商务、银行服务或任何需要用户完成一系列步骤的应用中。以下是如何实现这一功能的详细...
jsplumb获取json数据自动渲染_JsPlumb 动态_jsplumb实例
09-23
4. **根据JSON创建Endpoints**：遍历JSON数据，为每个元素创建对应的Endpoint。可以使用`jsPlumb.addEndpoint`方法，指定元素ID和端点的样式。 5. **根据JSON创建Connections**：同样遍历JSON，对于每个连接信息，...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
假设我们有一个包含所有列信息的数组`positionList`，每个元素对应一列的属性，包括`prop`、`label`和`width`。例如： ```javascript const positionList = [ { prop: 'date', label: '日期', width: 180 }, { ...
3D元素周期表_表面、球体、螺旋、网格
07-22
球体模式则将每个元素原子视为一个球体，大小可能根据原子半径调整，颜色则对应不同元素的特性。这种视觉表示有助于用户理解元素的相对大小和化学性质。 螺旋模式可能将元素沿着螺旋路径排列，这种布局方式可以展示...
js如何获取元素内容
热门推荐
Boke_的博客
06-21 2万+
window.onload = function(){ // 抓取元素 var box = document.getElementById("box"); // 给他绑定单击事件 box.onclick = function(){ // 获取元素内的所有内容 var con= box.innerHTML; // alert(con) // 设置元素内的内容（会把元素内原有的内容全部
jQuery如何获取动态添加的元素
MaggieWon
12-27 4707
一、问题描述 　　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 　　度娘推荐的方法基本是用live()方法 　　live()的官方定义和用法: 　　live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live(
关于js动态渲染的元素绑定事件遇到的坑
weixin_39460408的博客
11-17 4952
总结一下今天项目中遇到的关于动态渲染元素绑定事件遇到的一些坑。 首先作为后台管理系统除左边侧边栏外，右边主体部分都是动态渲染出来的。 第一：在给右侧主体里面元素绑定事件的时候，不要直接on绑定，而是用父元素代理事件来绑定，直接on是绑不上去的。 第二：因为是动态渲染的元素，因此一般的绑定事件方法会造成右侧页面局部刷新之后，事件会重复叠加。解决方法是绑定之前先进行事件解绑，我是用的of
js 循环渲染html页面
hanlu66的博客
01-15 2万+
如果是img就是以下这样的
html如何动态的显示文字,使用JS动态显示文本
weixin_33231849的博客
06-08 3650
本文实例为大家分享了JS动态显示文本的具体代码，供大家参考，具体内容如下index.html：页面(HTML5)time is long, life is shortaside添加显示Copyright (c) 2016 Copyright Holder All Rights Reserved.main.js:// 定义函数function show() {// 获得id为info的input标签...
元素标签style属性上动态绑定循环变量
最新发布
05-13
可以使用Vue.js的动态绑定语法，即使用v-bind指令将元素标签的style属性绑定到一个计算属性或方法上，然后在计算属性或方法中使用循环变量。 例如，假设有一个数组colors，包含三个颜色值，可以使用v-for指令循环渲染三个div元素，并使用v-bind指令将每个div元素的style属性绑定到一个计算属性colorStyle上，代码如下： ``` <template> <div> <div v-for="(color, index) in colors" :key="index" :style="colorStyle(index)">{{ color }}</div> </div> </template> <script> export default { data() { return { colors: ['#ff0000', '#00ff00', '#0000ff'] } }, methods: { colorStyle(index) { return { backgroundColor: this.colors[index], width: '100px', height: '100px' } } } } </script> ``` 在这个例子中，colorStyle方法接收一个循环变量index作为参数，然后根据index获取对应的颜色值，并将这个颜色值作为div元素的背景色绑定到style属性上。每个div元素的宽度和高度都是固定的100px。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值