javascript - 闭包在循环中不能正常工作-6ren

javascript - 闭包在循环中不能正常工作

转载作者：行者123 更新时间：2023-11-30 14:48:58

29

4

我正在尝试创建一个函数 getDelete()，它将创建 onclick 事件 以删除元素 text 和 pointDel。最后一个将由用于创建 3 个元素 pointDel 的支持函数 createPoindetDel() 创建和包含。

我已经尝试了几种方法来解决这个问题，但仍然没有一个正确的结果。我的函数结果仍然是 Uncaught TypeError: Cannot read property 'remove' of undefined 我想删除多个 block 。

我认为问题出在两个函数的闭包上。

附言我必须使用这些结构。我无法简化它。

function createPoindetDel(text) {

    for (var i = 0; i < text.length; i++ ) (function(i) {

  	var textCoords = text[i].getBoundingClientRect();	

	var pointDel = document.createElement('p');
            pointDel.innerHTML = '[x]';
	    pointDel.className = 'deleting';
	    pointDel.style.top = textCoords.top + pageYOffset + 'px';
	    pointDel.style.left = textCoords.right + pageXOffset + 'px';
				
	text[i].appendChild(pointDel);

	return pointDel;
    })(i);		
}

function getDelete() {

    var text = document.getElementsByClassName('text-block');
  	  		
    createPoindetDel(text); 

    var p = document.getElementsByClassName('deleting');

    for (var j = 0; j < text.length; j++ ) (function(j) {
    
  	p[j].addEventListener( 'click', function() {text[j].remove()} );
	p[j].addEventListener( 'click', function() {p[j].remove()} );	
 
    })(j);
}

getDelete();

.text-block {
 	max-width: 500px;
 	height: auto;
 	padding: 20px;
 	border-top: 2px #C4DF9B solid;
 	background-color: #EDF5E1;
 	margin-bottom: 0;
}

.text-block span {
 	font-size: 18px;
 	font-weight: bold;
 	color:  #111;
 	margin-top: 0;
}

 .text-block p {
 	font-size:  15px;
 	margin-bottom: 0;
 	color: #111;

}

.deleting {
   position:absolute;
   float:right;
   margin:0px;
   top: 0;
   right: -20px;
   display:inline;
   cursor:pointer;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
  </style>
</head>
<body>
	<div class="text-block">
		<span>Horse</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
	<div class="text-block">
		<span>Pig</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
		<div class="text-block">
		<span>Mul</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>

<script>
</script>
</body>
</html>

最佳答案

当您将事件监听器添加到“p”元素时，您可以使用索引:

p[j].addEventListener( 'click', function() {text[j].remove()} );
// you are accessing the j index from the text array

当你删除一个元素时，你改变了数组的长度(文本)。正确的？然后，当您尝试删除另一个元素时，您尝试使用之前定义的索引，例如索引位置 2。但是新数组在位置 2 没有元素。

如果您尝试先点击最后一个“x”，您的代码将毫无问题地运行。因为这样，你会删除最大的索引。

这很难解释。但是你可以尝试使用事件的函数范围来解决:

编辑:请注意，我将 position:relative 放在了您的 .text-block 类中，并在 JS 中评论了您的 position hack。这也将修复您的 CSS。

尝试像这样更改您的事件函数:

function createPoindetDel(text) {

  for (var i = 0; i < text.length; i++ ) (function(i) {

    var textCoords = text[i].getBoundingClientRect();	
    var pointDel = document.createElement('p');
		
    pointDel.innerHTML = '[x]';
    pointDel.className = 'deleting';
    //pointDel.style.top = textCoords.top + pageYOffset + 'px';
    //pointDel.style.left = textCoords.right + pageXOffset + 'px';
			
    text[i].appendChild(pointDel);

    //return pointDel;
  })(i);		
}

function getDelete() {
  var text = document.getElementsByClassName('text-block');
  createPoindetDel(text); 
  var p = document.getElementsByClassName('deleting');

  for (var j = 0; j < text.length; j++ ) (function(j) {
    p[j].addEventListener( 'click', function() {
      //here 'this' is the element that was clicked, and parentElement you can supose! =)
      this.parentElement.remove() 
    });
  })(j);
}

getDelete();

.text-block {
  position:relative;
  max-width: 500px;
  height: auto;
  padding: 20px;
  border-top: 2px #C4DF9B solid;
  background-color: #EDF5E1;
  margin-bottom: 0;
}

.text-block span {
  font-size: 18px;
  font-weight: bold;
  color:  #111;
  margin-top: 0;
}

 .text-block p {
  font-size:  15px;
  margin-bottom: 0;
  color: #111;

}

.deleting {
   position:absolute;
   float:right;
   margin:0px;
   top: 0;
   right: -20px;
   display:inline;
   cursor:pointer;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
  </style>
</head>
<body>
	<div class="text-block">
		<span>Horse</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
	<div class="text-block">
		<span>Pig</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
		<div class="text-block">
		<span>Mul</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>

<script>
</script>
</body>
</html>

关于javascript - 闭包在循环中不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48458608/

29

4

0

文章推荐： javascript - Ext.Defer 给出 getAsynchronousLoad 错误

文章推荐： c# - asp.net webforms 谷歌登录

文章推荐： C# IComparable IComparer 附加参数

文章推荐： javascript - 添加对象数组以形成对象

javascript - Python 闭包 vs javascript 闭包
以下闭包函数在 javascript 中运行良好。 function generateNextNumber(startNumber) { var current = startNumber;
Swift开发基础06-闭包
Swift的闭包（Closures）是一种将功能块和上下文整合并演示在代码中的一种手段。闭包可以捕获并存储其上下文中的变量和常量。与普遍存在于其他语言的匿名函数（如Python的lambda、Java
JavaScript 闭包
在本教程中，您将借助示例了解 JavaScript 闭包。在了解闭包之前，您需要了解两个概念：嵌套函数返回函数 JavaScript 嵌套函数在 JavaScript 中，一个函数也可
JavaScript 闭包
在本教程中，您将借助示例了解 JavaScript 闭包。在了解闭包之前，您需要了解两个概念：嵌套函数返回函数 JavaScript 嵌套函数在 JavaScript 中，一个函数也可
JavaScript-闭包
闭包介绍闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。要理解闭包，首先必须理解Javascript特殊的变量作用域。 1.全局变量和局部变
JavaScript 闭包(this)
这个问题已经有答案了: Methods in ES6 objects: using arrow functions (6 个回答) 已关闭 6 年前。我已经在 stackoverflow 上到处查找
JavaScript 闭包
这个问题已经有答案了: How do JavaScript closures work? (86 个回答) 已关闭 9 年前。我有一个关于 Javascript 闭包的简单问题: 给出了以下函数:
Java内部类/闭包
所以我有以下内容: Object a = data.getA(); Object b = data.getB(); Object c = data.getC(); // and so on 这些对象是
超时后循环中的javascript变量作用域/闭包
现在已经很晚了，我大脑中道格拉斯·克罗克福德居住的部分已经关闭。我尝试了一些方法，但没有达到预期效果。我有一个 Canvas ，我在其中画了两条线，然后在计时器上淡出它们，但只有循环中的最后一行淡出
JavaScript 闭包
因此，我创建了一个变量 car，然后将其分配给一个函数并添加了参数模型、年份。然后在函数内引用参数创建一个对象。然后创建“闭包”内部函数 yourCar() 并返回其中的外部函数对象“Propert
JavaScript - 闭包
我正在 Mozilla 开发者网站上阅读关于关闭的解释，并且有点挣扎。请查看 Mozilla 网站上的以下代码。我有点理解它是如何工作的，但我认为我的评论下面的代码也应该工作。为什么一点击18、20就
Python 闭包
这个问题在这里已经有了答案: UnboundLocalError trying to use a variable (supposed to be global) that is (re)assig
Javascript 闭包
以下程序返回“本地”，根据我正在阅读的教程，它旨在演示闭包现象` 我不明白的是，为什么最后为了调用parentfunction，将其分配给变量“child”，然后调用“child”。为什么只写 pa
Javascript 闭包
我读到闭包末尾的()会立即执行。那么，这两者之间有什么区别。我在一些代码中看到了第一个用法。谢谢。 for (var a=selectsomeobj(),i=0,len=a.length;i
Javascript 闭包
代码如下 var collection = (function (){ var x = 0; return {
Javascript 闭包
我仍然对 JavaScript 中的闭包概念感到困惑。我明白闭包是内部函数在母函数返回后访问在其母函数中创建的变量的能力。但是我仍然很困惑，如果我们可以在函数内部创建一个变量，为什么我们必须创建内部函
子查询中的 SqlAlchemy 闭包
我搜索了很多主题并没有找到答案，或者问题太复杂了。所以没关系。这是我的第一个问题。这是 SQL SELECT parent.*, ( SELECT COUNT(*) FROM
Javascript 对象/闭包
有 JS 高手可以解释为什么会这样吗: $$={} (function(x){ x.newModule = { func: function(){...} };
C# 闭包，为什么循环变量是通过引用捕获的？
在此示例中，我尝试按值传递，但传递的是引用。 for (int i = 0; i new PhoneJobTest(i); t.Start(); } 这可以像这样补救: for (int
jQueryeach() 闭包 - 如何访问外部变量
从 $.each() 中访问 this.rules 变量的最佳方式是什么？任何关于原因/方式的解释也会有帮助! app.Style = function(node) { this.style

首页

博学

6Ren·AI

商城

javascript - 闭包在循环中不能正常工作