javascript - 递归函数和removeEventListener-6ren

javascript - 递归函数和removeEventListener

转载作者：行者123 更新时间：2023-12-03 07:09:50

24

4

我想编写一个动态按钮创建器。所以我有 html 文件

<body>
    <button id="0" type="button" onclick="create_button(0)">Create button 1</button>
</body>

和js文件“模拟”正确的操作

var counter = 0;

function create_button(n) {

    /*Shift up*/
    for (i=counter; i>n; i--) {
        document.getElementById(i).id = i+1;
        document.getElementById(i+1).innerHTML = i+1;
    };

    /*Create new button*/
    var new_button = document.createElement("Button");
    new_button.innerHTML = n+1;
    new_button.type = "button";
    new_button.id = n+1;
    function helper() {
        create_button(n+1);
    };
    new_button.addEventListener('click', helper );

    document.body.insertBefore(new_button,document.getElementById(n).nextSibling);

    counter++;
};

但是/*Shift up*/部分仅更改按钮的id和innerHTML而不是click的操作>。因此，为了解决这个问题，我需要在 /*Shift up*/ 中添加两行，它们应该作为

document.getElementById(i+1).addEventListener('click', helper(i+1) );
document.getElementById(i+1).removeEventListener('click', helper(i) );

显然这是行不通的。由于 create_button 函数的递归性质，我认为 helper 应该移到 create_button 之外。但我不知道该怎么做。

一些附加信息 我简化了代码，但实际上按钮有一些依赖于 n 的附加功能。假设我们还想提醒按钮的位置。所以我们将助手更改为

function helper() {
    create_button(n+1);
    alert(n+1);
};

参见https://jsfiddle.net/o3Lsttyq/3/警报说什么。单击示例 1,1,3。

最佳答案

由于您正在调整 id 以便它始终与当前索引匹配，并且您的函数 helper 需要相同的索引，因此您似乎所需要做的就是移动您的helper 函数并将其更改为如下内容:

function helper(){
  var n1 = this.id; // effectively "n+1"
  alert(n1);
}

您也不需要使用该参数调用 create_button，因为您想要的数据可以从 this 中提取。

(此外，您不应该将 id 属性用于此类事情。您应该使用 data- 前缀属性，如 here 中所述。另外，使用 this 而不是使用 getElementById() 进行重构意味着您可以不再需要跟踪元素的索引。)

重构的乐趣:

<body>
    <button type="button">Create button 1</button>
</body>

function create_button(){
  var index = (this.innerHTML|0) + 1;
  var new_button = document.createElement("button");
  new_button.type = "button";
  new_button.addEventListener('click',create_button);
  document.body.insertBefore(new_button,this.nextSibling);

  var target = new_button;
  while(target) {
    target.innerHtml = index;
    target = target.nextSibling;
    index += 1;
  }
}
document.body.getElementsByTagName("button")[0].addEventListener('click',create_button);

关于javascript - 递归函数和removeEventListener，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36655963/

24

4

0

文章推荐： javascript - 使用 javascript 更改错误代码

文章推荐： javascript - 如何在放大背景图像时平移背景图像？

文章推荐： javascript - JQuery - 在图像上绘制矩形

文章推荐： javascript - 在 react 代码中双重发布

JavaScript 递归
在本教程中，您将借助示例了解 JavaScript 中的递归。递归是一个调用自身的过程。调用自身的函数称为递归函数。递归函数的语法是： function recurse() {
'new'方法中的C#递归
我的类(class) MyClass 中有这段代码: public new MyClass this[int index] { get {
PHP通过FTP下载整个文件夹(递归)
我目前有一个非常大的网站，大小约为 5GB，包含 60,000 个文件。当前主机在帮助我将站点转移到新主机方面并没有做太多事情，我想的是在我的新主机上制作一个简单的脚本以 FTP 到旧主机并下载整个
Java - 递归
以下是我对 AP 计算机科学问题的改编。书上说应该打印00100123我认为它应该打印 0010012但下面的代码实际上打印了 3132123 这是怎么回事？而且它似乎没有任何停止条件？! publi
Kotlin 递归
fun fact(x: Int): Int{ tailrec fun factTail(y: Int, z: Int): Int{ if (y == 0) return z
在C中创建和显示线性链表(递归)
我正在尝试用c语言递归地创建线性链表，但继续坚持下去，代码无法正常工作，并出现错误“链接器工具错误 LNK2019”。可悲的是我不明白发生了什么事。这是我的代码。感谢您提前提供的大力帮助。 #inc
JavaScript 递归？
我正在练习递归。从概念上讲，我理解这应该如何工作(见下文)，但我的代码不起作用。请告诉我我做错了什么。并请解释您的代码的每个步骤及其工作原理。清晰的解释比只给我有效的代码要好十倍。 /* b
Javascript 递归
我有一个 ajax 调用，我想在完成解析并将结果动画化到页面中后调用它。这就是我陷入困境的地方。我能记忆起这个功能，但它似乎没有考虑到动画的延迟。即控制台不断以疯狂的速度输出值。我认为 setIn
JavaScript 递归
有人愿意用通俗易懂的语言逐步解释这个程序(取自书籍教程)以帮助我理解递归吗？ var reverseArray = function(x,indx,str) { return indx == 0 ?
JavaScript 递归
目标是找出数组中整数的任意组合是否等于数组中的最大整数。 function ArrayAdditionI(arr) { arr.sort(function(a,b){ return a -
MySQL用序列化数据连接两个表，递归？
我在尝试获取 SQL 查询所需的所有数据时遇到一些重大问题。我对查询还很陌生，所以我会尽力尽可能地描述这一点。我正在尝试使用 Wordpress 插件 NextGen Gallery 进行交叉查询。
Python:递归
虽然网上有很多关于递归的信息，但我还没有找到任何可以应用于我的问题的信息。我对编程还是很陌生，所以如果我的问题很微不足道，请原谅。感谢您的帮助:) 这就是我想要的结果: listVariations
C练习任务(递归)
我一整天都在为以下问题而苦苦挣扎。我一开始就有问题。我不知道如何使用递归来解决这个特定问题。我将非常感谢您的帮助，因为我的期末考试还有几天。干杯假设有一个包含“n”个元素的整数数组“a”。编写递归函
Javascript 递归
我有这个问题我想创建一个递归函数来计算所有可能的数字 (k>0)，加上数字 1 或 2。数字 2 的示例我有两个可能性。 2 = 1+1 和 2 = 2 ，对于数字 3 两个 poss。 3 = 1+
以Top-Down思维去解决问题——递归
目录递归的基础递归的底层实现（不是重点）递归的应用场景编程中两种解决问题的思维自下而上（Bottom-Up）自上而下（Top-
Python数据结构与算法（4.1）——递归
0. 学习目标递归函数是直接调用自己或通过一系列语句间接调用自己的函数。递归在程序设计有着举足轻重的作用，在很多情况下，借助递归可以优雅的解决问题。本节主要介绍递归的基本概念以及如何构建递归程序。
php - 数组中所有可能的组合 - 递归？
我有一个问题一直困扰着我，希望有人能提供帮助。我认为它可能必须通过递归和/或排列来解决，但我不是一个足够好的 (PHP) 程序员。 $map[] = array("0", "1", "2", "3")
用 dplyr 递归
我有数据 library(dplyr, warn.conflicts = FALSE) mtcars %>% as_tibble() %>% select(mpg, qsec) %>% h
kdb - q - 递归/
在 q 中，over 的常见插图运算符(operator) /是 implementation of fibonacci sequence 10 {x,sum -2#x}/ 1 1 这确实打印了前 1
methods - 递归 - 一个语句中的两个调用
我试图理解以下代码片段中的递归调用。 static long fib(int n) { return n <= 1 ? n : fib(n-1) + fib(n-2); } 哪个函数调用首先被

首页

博学

6Ren·AI

商城

javascript - 递归函数和removeEventListener