按钮点击后JS访问元素index值失效问题:为什么循环中分配的index值在按钮点击事件中失效?

按钮点击后js访问元素index值失效问题:为什么循环中分配的index值在按钮点击事件中失效?

按钮点击后%ignore_a_1%访问元素index值失效问题

下面这段代码旨在实现按钮点击后,隐藏一个无序列表中的所有元素,并显示与被点击按钮相对应的列表元素。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var oinput = document.getelementsbytagname("input"); var oli = document.getelementsbytagname("li"); for (var i = 0; i < oinput.length; i++) { oinput[i].index = i; oinput[i].onclick = function() { for (var j = 0; j < oli.length; j++) { console.log(i); // 输出为6 oli[j].style.display = "block"; } console.log(i); // 输出为6 oli[this.index].style.display = "none"; } }

然而,代码中却存在一个问题:按钮点击后,输出的index值始终为6,导致无法正确隐藏或显示对应的列表元素。

问题原因

问题产生于代码中的for循环:

小艺 小艺

华为公司推出的AI智能助手

小艺 549 查看详情 小艺

for (var i = 0; i < oinput.length; i++) {    oinput[i].index = i;    oinput[i].onclick = function() {        ...    }}

当此for循环执行时,它会为每个按钮元素分配一个index值。但是,当按钮被点击时,用于触发onclick事件处理程序的实际index值获取自循环的最后一次迭代。因此,对于所有按钮点击事件,index值都为6,这是循环的最后一次迭代的值。

解决方案

要解决这个问题,需要将index值分配到onclick事件处理程序函数中,而不是在for循环中分配:

for (var i = 0; i < oInput.length; i++) {    (function(index) {        oInput[i].onclick = function() {            ...            oLi[index].style.display = "none";            ...        }    })(i);}

通过改用闭包,每个按钮的onclick事件处理程序都会获得自己唯一的index值,从而可以正确隐藏或显示对应的列表元素。

以上就是按钮点击后JS访问元素index值失效问题:为什么循环中分配的index值在按钮点击事件中失效?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/797263.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月26日 16:31:54
下一篇 2025年11月26日 16:34:56

相关推荐

  • Orochi (ON)是什么?币安新上线项目全解析

    Binance币安 欧易OKX ️ Huobi火币️ Orochi (ON) 是什么? Orochi Network是一个可验证数据基础设施(Verifiable Data Infrastructure),专注于解决区块链生态中的可扩展性、隐私和数据完整性挑战。该项目成立于2021年,总部位于越南,…

    2025年12月9日
    000
  • 加密Launchpad平台是什么?如何运作?有哪些类型?一文详解

    在加密货币领域,早期参与项目可以为投资者提供高收益机会。加密货币 发行平台 (launchpad)允许投资者在新代币或项目 ipo 之前以低价购入,并在未来升值时获利。随着区块链技术的兴起,launchpad平台已成为投资者和项目创始人安全可靠的交流平台。 Binance币安 欧易OKX ️ Huo…

    2025年12月9日 好文分享
    000
  • AI驱动计算需求利好矿工股,比特币价格反弹超10%

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币HTX交易所: 注册入口: APP下载: 近期,由人工智能(AI)技术引发的算力需求激增,正持续为全球高性能计算相关企业带来利好。与此同时,以比特币为代表的数字资产市场也迎来强劲反弹,价格在短期内录得…

    2025年12月9日
    000
  • 新稳定币USDH是什么?有何作用?USDH的推出对 Hyperliquid 意味着什么?

    2025年9月5日星期五,目前在去中心化衍生品交易所中占据绝对领先地位的hyperliquid宣布,正寻求发行一个「hyperliquid 优先、与 hyperliquid 利益一致且合规的美元稳定币」,并邀请团队提交提案。 Binance币安 欧易OKX ️ Huobi火币️ Hyperliqui…

    2025年12月9日 好文分享
    000
  • 区块链技术到底神奇在哪里?一文读懂它的工作原理!

    %ignore_a_1%币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: 区块链常与比特币挂钩,但它远不止数字货币。它是一种革命性的分布式账本技术,其核心魔力在于去中心化、公开透明且不可篡改的特性,正重塑数字世界的信任基石。 告…

    2025年12月9日
    000
  • Binance Coin新高突破:日本经济动荡下,Web3电商支付代币成避险选择

    近期,BNB价格强势突破历史新高,引发市场广泛关注。在全球经济不确定性增加,特别是日本经济面临严峻挑战的背景下,以BNB为代表的Web3电商支付代币,正凭借其独特的应用价值,成为部分投资者眼中理想的避险工具。 一、BNB价格创下历史新高 1、根据市场数据显示,BNB的价格在近期交易中成功突破了历史最…

    2025年12月9日
    000
  • 隐私协议Zama FHE代币爆火:全球AI监管加码,加密数据计算行情领跑

    随着全球对人工智能(AI)的监管日趋严格,如何在保护用户数据隐私的前提下进行有效计算,已成为行业核心议题。在此背景下,Zama提出的全同态加密(FHE)技术方案脱颖而出,其相关代币也因此获得了市场的广泛关注,成为加密数据计算赛道的领跑者。 一、全球AI监管浪潮与数据隐私挑战 1、世界各国,特别是欧盟…

    2025年12月9日
    000
  • 稳定币购买渠道 稳定币购买渠道入口

    数字货币市场的波动性,让许多投资者寻求“避风港”。稳定币作为一种价值锚定于法定货币或其他资产的加密货币,以其相对稳定的价格波动,成为投资者进行套利、避险和日常交易的重要工具。然而,如何便捷、安全地获取稳定币,尤其是对于初入加密世界的用户来说,往往是一个令人困惑的问题。本文将深入探讨稳定币的购买渠道,…

    好文分享 2025年12月9日
    000
  • 全球热议的稳定币,究竟是什么!

    全球热议的稳定币,究竟是什么! 加密货币市场风云变幻,价格波动剧烈,让许多投资者望而却步。然而,有一种特殊类型的加密资产,它的价格被设计成与某种稳定资产(如美元或黄金)挂钩,从而保持相对稳定,这就是我们今天重点探讨的稳定币(stablecoin)。稳定币的出现,彻底改变了加密货币的应用场景,它不仅为…

    好文分享 2025年12月9日
    000
  • 稳定币有投资价值吗?

    加密货币市场波澜壮阔,其中心脏地带——交易所——扮演着至关重要的角色。对于许多初入币圈或寻求资产保值的投资者而言,稳定币的价值及其在交易所中的地位是他们关注的焦点。稳定币,顾名思义,是一种旨在保持价格稳定的加密货币,通常与美元等法定货币以1:1的比例挂钩。这种特性使其在动荡的加密市场中成为避险资产、…

    好文分享 2025年12月9日
    000
  • 马斯克在X上发布宠物狗Floki照片,模因币暴涨29%详细了解

    Binance币安 欧易OKX ️ Huobi火币️ 在马斯克发布其柴犬被任命为社交媒体平台X“首席执行官”的趣味视频后,Floki模因币价格迅速上涨近29%。 美国科技企业家马斯克于其旗下社交平台X上发布一则轻松内容,随即引发模因币市场短暂回暖。 本周一,马斯克发文称他的爱犬柴犬Floki已“重返…

    2025年12月9日
    000
  • 估值突破5000亿美元,USDT发行商泰达超越OpenAI与字节

    近期,USDT 发行商泰达(Tether)的估值突破了 5000 亿美元,在市值上超越了 OpenAI 和字节跳动,成为全球加密市场最具影响力的稳定币公司之一。本文将解析泰达的市值增长原因、USDT 发行情况及投资者关注的重点。 泰达市值突破与USDT发行 随着加密市场的持续发展,USDT 在交易、…

    2025年12月9日
    000
  • 虚拟货币空投解析:什么是空投、能赚多少以及如何轻松获取

    虚拟货币空投(Airdrop)是一种在区块链生态中常见的奖励方式,项目方通过免费分发代币来吸引用户关注和参与社区。本文将详细解析空投的概念、潜在收益及获取方法,帮助投资者了解如何轻松参与虚拟货币空投活动。 什么是虚拟货币空投 空投是指项目方将代币免费发送给符合条件的用户账户,通常是为了推广新项目、奖…

    2025年12月9日
    000
  • Bluwhale AI(BLUAI)项目于今日(21日)上线,获得了Sui等多个头部公链生态的投资支持

    Bluwhale的原生代币BLUAI于2025年10月21日进行了代币生成事件(TGE),并在Binance Alpha和Binance Futures平台上线交易。在Binance Futures平台,BLUAI/USDT永续合约提供最高50倍杠杆,支持24/7交易。此外,Binance还为符合条…

    2025年12月9日
    000
  • 比特币到底是谁发明的?“中本聪”的真实身份大揭秘!

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: 比特币,作为数字货币的先驱,由一位名为“中本聪”的神秘人物或团体创造。他的真实身份至今仍是科技界最大的谜团之一,引发了全球范围内无数的猜测和调查。 中本聪的官方形象…

    2025年12月9日
    000
  • BNB是什么币?一文读懂币安生态系统和BNB链!

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: BNB,全称Build and Build,是币安生态系统的核心原生代币。它最初作为ERC-20代币发行,现已迁移至其主网BNB链。BNB不仅用于支付交易费用,还深…

    2025年12月9日
    000
  • 公链、侧链、联盟链有什么区别?一文带你分清这些基本概念!

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: 区块链技术日益普及,但公链、联盟链和侧链等概念常让人困惑。它们在开放性、去中心化程度、交易效率和应用场景上各有侧重,清晰理解其核心区别是进入区块链世界的基础。 公链…

    2025年12月9日
    000
  • “韭菜”、“钻石手”是什么意思?币圈黑话大盘点!

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: 进入加密货币的世界,总会听到一些令人困惑的“黑话”。所谓“韭菜”与“钻石手”究竟代表什么?理解这些行业术语,是每位投资者的必修课,能助您看懂市场风云。 币圈人物画像…

    2025年12月9日
    000
  • ADA是什么币?卡尔达诺(Cardano)的项目优势和前景分析!

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: ADA,中文通常称为艾达币,是卡尔达诺(Cardano)区块链平台的原生加密货币。它由以太坊联合创始人查尔斯·霍斯金森创立,其开发核心在于科学哲学和学术研究,旨在打…

    2025年12月9日
    000
  • 什么是无常损失?为什么我提供流动性反而还亏钱了?

    binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: APP下载: 火币交易所: 注册入口: APP下载: 无常损失是去中心化金融(DeFi)中一个常见概念,特指为自动做市商(AMM)提供流动性时,因代币价格波动而产生的账面亏损。这种亏损与直接持有资产相比,可能会让你赚得…

    2025年12月9日
    000

发表回复

登录后才能评论
关注微信