开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何获取动态生成的已单击按钮的索引

获取动态生成的已单击按钮的索引可以通过以下步骤实现：

首先，确保你已经在前端开发中生成了一组动态按钮，并为每个按钮添加了相应的点击事件处理程序。
在点击事件处理程序中，可以使用JavaScript来获取已单击按钮的索引。可以通过以下几种方式实现：
a. 使用事件对象（event object）：在事件处理程序中，可以通过事件对象来获取触发事件的元素。可以使用event.target或event.currentTarget来获取当前被点击的按钮元素。然后，可以通过遍历按钮元素的父节点或兄弟节点来确定按钮的索引。
b. 使用自定义属性：在生成动态按钮时，可以为每个按钮添加一个自定义属性，例如data-index，并将其设置为按钮的索引值。在点击事件处理程序中，可以通过访问event.target.dataset.index来获取已单击按钮的索引。
c. 使用闭包：在生成动态按钮时，可以使用闭包来保存每个按钮的索引。在点击事件处理程序中，可以直接访问闭包中保存的索引值。
一旦获取到已单击按钮的索引，你可以根据需要进行进一步的操作，例如更新UI、发送网络请求等。

以下是一个示例代码，演示如何使用自定义属性来获取动态生成的已单击按钮的索引：

<!DOCTYPE html>
<html>
<head>
  <title>获取动态生成按钮的索引</title>
</head>
<body>
  <div id="button-container"></div>

  <script>
    // 生成动态按钮
    function generateButtons() {
      var container = document.getElementById('button-container');
      for (var i = 0; i < 5; i++) {
        var button = document.createElement('button');
        button.textContent = '按钮 ' + i;
        button.setAttribute('data-index', i); // 设置自定义属性
        button.addEventListener('click', handleClick);
        container.appendChild(button);
      }
    }

    // 点击事件处理程序
    function handleClick(event) {
      var index = event.target.dataset.index; // 获取自定义属性值
      console.log('已单击按钮的索引：', index);
    }

    // 生成按钮
    generateButtons();
  </script>
</body>
</html>

在上述示例中，我们使用了自定义属性data-index来存储按钮的索引值，并在点击事件处理程序中通过event.target.dataset.index来获取该值。你可以根据实际需求进行修改和扩展。

相关搜索:获取动态生成的按钮ID 从动态生成的按钮获取响应如何获取动态生成的按钮点击时的id 如何获取按钮的索引无法获取已单击幻灯片的正确索引如何获取单击的按钮的值提交动态生成的按钮如何在javascript中获取动态生成按钮的内部文本？selenium如何单击具有动态ID的按钮单击按钮时获取对象/项目(动态创建的按钮)-堆栈面板 VBA Web抓取:单击具有动态生成的名称和ID的按钮如何获取被点击按钮的索引？从ajax请求动态生成的单选按钮获取值如何获取按钮用户的ID只需单击？Blazor -动态生成的表格中的按钮如何在按钮单击时获取动态表格单元格的值如何使用selenium单击具有动态输入的单选按钮？如何在点击按钮中获取动态div的所有索引显示更多jquery Meteor获取动态生成的值按钮上的开关选项卡已单击

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

爬虫入门指南(4): 使用Selenium和API爬取动态网页的最佳方法

随着互联网的发展，许多网站开始采用动态网页来呈现内容。与传统的静态网页不同，动态网页使用JavaScript等脚本技术来实现内容的动态加载和更新。这给网页爬取带来了一定的挑战，因为传统的爬虫工具往往只能获取静态网页的内容。本文将介绍如何使用Selenium和API来实现动态网页的爬取

01

网页轮播图案例

② 此时用到animate动画函数，将js文件引入（注意，因为index.js 依赖 animate.js 所以，animate.js 要写到 index.js 上面）

01

dom 自定义事件_pix4D生成dom

之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下：

03

网页轮播图案例

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

02

网页轮播图案例

此时用到animate动画函数，将js文件引入(注意，因为index.js 依赖animate.js所以，animate.js 要写到index.is.上面)

03

Asp.NET Core 如何使用ElasticSearch和Kibana创建仪表板

在我以前的文章（这里是第一[1]篇和第二篇[2]）中，我展示了ElasticSearch作为电子商务中的全文搜索引擎的使用，一些高级配置的设置和使用以及products包含所有内容的索引的创建保存的产品。

03

JavaScript案例：轮播图

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

01

【Java 进阶篇】JavaScript DOM Document对象详解

在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深入探讨Document对象，包括它的属性、方法以及如何使用它来操纵网页内容。

02

项目中 2 个真实的 TS 类型编程案例

最近有两个同学问了我项目中遇到的 ts 问题，这俩问题都是典型的可以用类型编程来解决的。

02

从零开始折腾博客(0)：静态？动态？

这两天心血来潮，忽然想折腾一个属于自己的博客，也就是这一系列的缘由。而最终也总算是折腾出来了，要不你就不会看到这篇文章了

02

深入解析JS工程逆中的反爬机制

在当今互联网时代，爬虫技术被广泛应用于数据采集、搜索引擎优化等领域。然而，许多网站为了保护其数据和资源，采取了各种反爬机制。JS逆工程是其中一种常见的反爬手段，通过在网页中利用JavaScript代码动态生成内容，使得爬虫难以获取有效数据。本文深入解析了JS逆工程中的反爬机制，并提供了解决方案。

03

java高性能反射及性能对比

java编程中，使用反射来增强灵活性（如各类框架）、某些抽象（如各类框架）及减少样板代码（如Java Bean）。因此，反射在实际的java项目中被大量使用。

03

jQuery 动态绑定

这是在项目过程中所遇到的一个问题，给 JS 动态生成的元素绑定事件失效，代码如下所示：

03

微信小程序那点事儿(必看&踩坑&实用&解决BUG)------持续更新(2)

我们可以根据上边两个API获取系统信息 e.g. pixelRatio（设备像素比） screenWidth（屏幕宽度） locationAuthorized（允许微信使用定位的开关） bluetoothEnabled（蓝牙的系统开关） locationEnabled（地理位置的系统开关） wifiEnabled（wifiEnabled）但是这两个方法有个共同的问题是在真机调试的情况下，不能实时更新返回的信息 e.g. 点击按钮获取手机地理位置的系统开关来判断是否提示用户打开GPS 如果在真机调试的情况下手动打开关闭手机中的位置开关点击按钮得到的结果并不会根据手机的状态进行更新则不能达到你想要的效果，此时可以直接预览打开调试进行测试即可

01

Play For Scala 开发指南 - 第4章第一个Play项目

准备环境安装JDK8 单击这里下载并安装JDK8，安装完成后在命令行查看Java的版本号： C:\Users\Lenovo>java -version java version "1.8.0_111" Java(TM) SE Runtime Environment (build 1.8.0_111-b14) Java HotSpot(TM) 64-Bit Server VM (build 25.111-b14, mixed mode) 如果上面的命令执行报错，请手动将路径"Java安装目录/bin"

04

微信小程序开发实战（16）：交互组件

iOS程序员一定对ActionSheet非常熟悉，这是Cocoa Touch很常用的UI组件。使用ActionSheet会从当前窗口底部往上弹出一个窗口，可以在该窗口放置任何组件，例如，如图1所示的一排按钮。

02

PyQt的一个UI单元测试框架思路

專欄 ❈丁果，Python中文社区作者。对django、pyqt、opencv、tornado感兴趣。 GitHub：https://github.com/lidingke ❈ 一、思路 PyQt是个相当灵活的UI框架，不过，这个Qt的Python版本一直没有一个好用的针对UI的单元测试工具。 PyQt里的逻辑层都是采用信号槽的方式连接的，我们可以通过拦截并重建信号槽的方式，动态生成一个单元测试的脚本。按这个思路写了一个单元测试的工具。如果需要的人多的话，我就把这个模块做成一个单元测试的框架。二、d

06

dropdownlist的AutoPostBack属性「建议收藏」

我最近在做一个教学楼管理系统，老师说最好做成动态网页的形式，反正我也希望自己学习一下有关.net的东西,于是就选择了asp.net，在这之前我学习过mfc,asp 所以入门不算太难，甚至在刚刚接触C#的时候还很兴奋，觉得用vc++要写大段代码解决的问题，而用C#几乎一段代码都不用写。所以学习了一周时间我就开始准备动手做教学楼管理系统，在做的过程中遇到了很多的问题，今天上午我准备用母版页的技术来实现各个页面的统一布局，在模板页上放置各种控件，单击查询按钮在内容页显示查询的结果，当时我为了尽量减少因为用户使用时输入不正确的字符造成的操作性错误，我就选用大量的dropdownlist 控件代替textbox控件，准备随着dropdownlist控件选项的改变动态生成其他不同的控件，但是当我准备编写代码实现该功能的时候发现dropdownlist 控件的触发响应事件方法中的代码根本就没有响应，按照VC++的经验我觉得是是因为这个控件是放在母版上的原因，所以就一头钻进了书海查找关于母版方面的知识一直到中午这个问题都没有解决，到了晚上我尝试性的将dropdownlist换成了button控件，结果button的按钮点击事件能够响应，所以断定不是因为我先前认为的母版的原因，肯定是dropdownlist控件哪里没有用对，所以就在百度里面搜素了一下关于的dropdownlist事件响应方面的问题，呵呵原来我没有把dropdownlist的AutoPostBack属性设置为ture,就这样一个常识性的问题，花了我我一天的时间，但是还是挺值得的在我解决问题的过程了看了一些关于母版、皮肤、主题方面的资料加深了自己对他们的认识，在以后的使用到这些技术的时候，一点会少花一点时间。总之生活很简单，遇到困难的时候拒绝堕落，拒绝灰心丧气就行。

02

动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证

我建两个相似的表是为了，给后台使用人员显示所操作的数据，同时方便把开发人员真正要操作的数据传到对应Action中，隐藏开发人员传参用的表。

06

单页面Vue网站无服务端实现静态化SEO

本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/vue_seo_spa_new_way/

01

Java爬虫攻略：应对JavaScript登录表单

在进行网络抓取数据时，经常会遇到需要登录的网站，特别是使用JavaScript动态生成登录表单的情况。传统的爬虫工具可能无法直接处理这种情况，因此需要一种能够模拟用户行为登录的情况解决方案。

01

优化查询性能（一）

InterSystems SQL自动使用查询优化器创建在大多数情况下提供最佳查询性能的查询计划。该优化器在许多方面提高了查询性能，包括确定要使用哪些索引、确定多个AND条件的求值顺序、在执行多个联接时确定表的顺序，以及许多其他优化操作。可以在查询的FROM子句中向此优化器提供“提示”。本章介绍可用于评估查询计划和修改InterSystems SQL将如何优化特定查询的工具。

01

jQuery动态生成input填写时间值并且提交给后端

今天写的一个demo，关于jQuery动态生成input填写时间值并且提交给后端。

03

Django实现列表页商品数据返回教程

补充知识：django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库

02

三分钟让你也拥有一个很酷炫的GitHub展示页面(保姆级教程)

按照下面这个简单演练中的步骤，在您的 GitHub 个人资料上自定义您的 Readme.md，使其看起来更有吸引力。我还提供了一些很酷的元素来增加趣味！

02

在vb中什么被称为对象_vb控件数组怎么创建

昨晚和网友邬彦华在OICQ上闲聊，他言及正在为朋友编一个游戏菜单，其中动态创建了一组按纽，最后却无法释放。他的实现方法如下：

03

何为伪静态，如何快速实现。(别人原创，我改编转发)

我的答案：伪静态并不是有些老板说的为了加密用的。伪静态其实是使用php写的网页。大概是控制器加接口的语法不方便收录，和所谓的SEO优化，需要一个静态页面。这就是伪静态。

01

web开发中前端页面是如何跟后端服务器数据交互的「建议收藏」

常见的网页有html，htm,shtml，asp，aspx，php，jsp等格式前两个常用于静态网页，后面几个常用于动态网页。

01

Cypress系列（11）- Cypress 编写和组织测试用例篇之动态生成测试用例

https://www.cnblogs.com/poloyy/category/1768839.html

01

04-老马jQuery教程-DOM节点操作及位置和大小

根据给定的文章内容，撰写摘要总结。

00

Excel催化剂开源第7波-VSTO开发中Ribbon动态加载菜单

在VS开发环境中，特别是VSTO的开发，微软已经现成地给开发者准备了设计器模式的功能区开发，相对传统的VBA、ExcelDna和其他方式的COM加载项开发来说，不需要手写xml功能区，直接类似拖拉窗体控件一样，即可完成Ribbon功能区的开发，开发效率极高。

02

XSS跨站脚本攻击剖析与防御

跨站脚本（Cross-Site Scripting，XSS）是一种经常出现在Web应用程序中的计算机安全漏洞，是由于Web应用程序对用户的输入过滤不足而产生的。攻击者利用网站漏洞把恶意的脚本代码（通常包括HTML代码和客户端Javascript脚本）注入到网页之中，当其他用户浏览这些网页时，就会执行其中的恶意代码，对受害者可能采取Cookie资料窃取、会话劫持、钓鱼欺骗等各种攻击。

03

一篇文学会商用可编辑问卷表单制作【iVX 十二】

在 iVX 快速教程中，我们使用一个公共表单项目作为 WebApp 应用的演示说明。公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查，用户可以自由的设置表单元素以及样式，并且可以手动设置表单结束下载填写问卷后的调查数据。

03

第四章.监控系统-zabbix网站监控WEB

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

03

jquery slide 幻灯片

因为图片1-5是使用行内块的方式布局，只要控制图片1的div的margin-left改变，就可以跟推箱子一样，实现5个图片的左右滑动。

03

Java代理3：二刷代理

在使用动态代理时，需要定义一个位于代理类与委托类之间的中介类，也叫动态代理类，该类被要求实现InvocationHandler接口。

03

深入探讨 ElementUI 动态渲染 el-table

在前端开发中，表格是不可或缺的一部分。无论是数据展示、数据录入，还是数据分析，表格都扮演着重要的角色。而在 Vue.js 生态系统中，ElementUI 提供了一个强大且灵活的表格组件——el-table。本文将带你深入了解如何使用 ElementUI 动态渲染 el-table，并详细探讨其原理及实现过程。

00

模仿一个在线表格

展示地址：https://gethtml.cn/project/2020/04/19/index.html

02

『云存储』上传文件

通过前几篇文章，已经全面讲解了微信云数据库的 CRUD（创建、读取、更新、删除）操作。现在，我将向大家展示如何使用微信云存储服务，具体来说，我们会学习如何通过编写代码将文件上传到云端存储中。

02

Flutter DefaultTabController 获取当前索引

获取当前索引，可以看这个链接，涵盖多种方式： how-to-get-current-tab-index-in-flutter 其中点赞数最多的方式是使用TabController，然而它对我不太适用，因为我的某个需求，选项卡是动态生成的，而TabController初始化需要固定的length。而其它方法也不太好，我最后用下面新的方式实现： final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

01

在PowerDesigner中设计物理模型1——表和主外键

物理模型能够直观的反应出当前数据库的结构。在数据库中的表、视图、存储过程等数据库对象都可以在物理模型中进行设计。由于物理模型和数据库的一致性，接下来以数据库对象和物理模型对象的对应来一一介绍：

01

电子签名实现的思路、困难及解决方案

在办公自动化的流程中希望实现电子签名。思路： 1、图片的存放：安全起见存放在库中为宜。最好不能被轻易下载。 2、使用的过程：显示一个密码框和“签名”按钮，输入密码并按下按钮后，如果正确，隐藏输入框和按钮，显示图片。 3、我的所有控件都是通过解析xml后动态生成的，签名应该是一个新类别无疑（类别4），它至少得对两个地方增加代码：(1)创建部分（得同时创建输入密码框、按钮、图片显示框）（2）写入部分，得解析

05

手把手教你用JavaScript打造一个网页搜索引擎

小编之前带着大家一起做过一个python版的搜索引擎，今天带大家做一个JavaScript版的搜索引擎。

02

【已解决】Python成功解决IndexError: index 0 is out of bounds for axis 1 with size 0（图文教程）

在编程中，IndexError是一个常见的异常，它通常表示尝试访问一个不存在的索引。在Python中，当你尝试访问一个列表、数组或任何序列类型的元素，而该索引超出了序列的范围时，就会抛出IndexError。 IndexError: index 0 is out of bounds for axis 1 with size 0 这个错误特别指出问题出现在多维数组或列表的第二轴（axis 1），即列。当尝试访问第二轴上索引为0的位置，但该轴的大小为0时，就会发生这个错误。这通常意味着你正在尝试访问一个空的列或不存在的列。

02

常见网页特效案例

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

04

Ant-design-vue项目实现动态路由

1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

一篇了解爬虫技术方方面面

传统爬虫从一个或若干初始网页的URL开始，获得初始网页上的URL，在抓取网页的过程中，不断从当前页面上抽取新的URL放入队列,直到满足系统的一定停止条件。聚焦爬虫的工作流程较为复杂，需要根据一定的网页分析算法过滤与主题无关的链接，保留有用的链接并将其放入等待抓取的URL队列。

04

ChatGPT自动化编程：三分钟用Tkinter搞定计算器

本文结合ChatGPT和GitHub Copilot是一个Tkinter版的计算器程序。Tkinter是Python的内置GUI库，不需要单独安装。计算器程序有很多种类，本节会实现一个基本的计算器程序，在窗口上包含0到9一共10个数字按钮，以及“+”、“-”、“*”、“=”、“.”和“=”一共6个按钮，加一起一共16个按钮，正好是4行4列。具体的样式可以参考系统自身带的计算机程序，如图1就是macOS带的计算器程序的主界面。计算器的功能主要是单击除了“=”按钮外的其他按钮，会将按钮文本追加到计算器上方的文本输入框中，点击“=”按钮，会动态计算文本输入框中的表达式，双击文本输入框，会清空文本。

01

Vue使用Clipboard实现复制功能

不论是单按钮复制还是多按钮复制，一定要在页面加载DOM完成后先New出来具有复制功能的按钮，如果在函数内再New那么可能会出现点击复制按钮两次，才复制成功的现象，如下：

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭