js 怎么利用循环添加函数？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 怎么利用循环添加函数？相关的知识，希望对你有一定的参考价值。
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<style type="text/css">
td
border: red solid;
</style>
<script type="text/javascript">
function addfun()
var buttonNodes = document.getElementsByTagName("input");
for (var x = 0; x < buttonNodes.length; x++)
buttonNodes[x].onclick=function()
alert(x);
onload=addfun;
</script>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
</html>
想做3个按钮，按下第一个弹出1，按第二个，弹出2。为什么不行
第一种方法，利用闭包：
function addfun()
var buttonNodes = document.getElementsByTagName("input");
for (var x = 0; x < buttonNodes.length; x++)
(function(x)
buttonNodes[x].onclick=function()
alert(x);
)(x);
第二种方法，利用自定义属性值：
function addfun()
var buttonNodes = document.getElementsByTagName("input");
for (var x = 0; x < buttonNodes.length; x++)
buttonNodes[x].index=x;
buttonNodes[x].onclick=function()
alert(this.index);
第三种方法，利用ES6的新特性：
function addfun()
var buttonNodes = document.getElementsByTagName("input");
for (let x = 0; x < buttonNodes.length; x++)
buttonNodes[x].onclick=function()
alert(x);
参考技术A var是全局变量,将var改为let
React JS 在反应映射函数中添加条件循环
【中文标题】React JS 在反应映射函数中添加条件循环【英文标题】：React JS Adding a conditional loops in react map function 【发布时间】：2019-07-26 11:46:36 【问题描述】：我有一个从 json 文件中获取产品的 react 应用程序，每个按钮顶部有 2 个按钮将显示另一个 json/menuitems，因此由于我使用的一些 jsons 有空类别，应用程序崩溃，我想要什么to do 是一个条件循环，它要么跳过类别，要么将其显示为空，只要它不崩溃。
当您单击菜单 2 时，您可以在应用程序中看到它崩溃了。
这是现场直播：https://codesandbox.io/embed/j29k59x4ly?fontsize=14
这是 ItemList.js 第 139 > 149 行中的映射函数本身
activelist.children[this.state.selected].children.map(
(item, index) => (
<Item
className="person"
key=index
Title=item.name
onClick=this.handleClick
index=index
/>
)
)
【问题讨论】：
嗨，这有点混乱，你能解释一下'this.state.selected'是做什么的吗？我注意到您有 MENUS、CATEGORIES 和 ITENS，当您选择其中之一时，您会将值保存在 this.state.selected 中？ 将类别映射到另一个组件“类别”中，以便在滚动菜单栏中显示，并具有在单击类别时返回数字索引的功能，该功能将根据类别映射类别项索引，选定状态以 0 作为第一个类别开始，并在单击时不断变化以显示其中的项目。 【参考方案1】：我在123 和124 行发现了错误
const selectedChild = activelist.children[this.state.selected];
const selectedItem = selectedChild.children[this.state.itemSelected];
selectedChild 的数据是一个类别的集合，但是第一项没有children 属性然后使selectcedChild.children 得到undefined 并导致问题。
[
name: "Empty Category"
type: "category", //<-- No `children` attribute
,
children: […, …, …]
name: "Burgers"
type: "category"
,
children: (2) […, …]
name: "Sets"
type: "category"
]我的解决办法是：
-
您可以格式化所有
selectedChild 具有children 属性的项目。 children: [] 在没有数据的情况下。
或return 没有子级的消息。为了防止得到undefined的项目
const selectedChild = activelist.children[this.state.selected];
if (!selectedChild.children) return <span>Out of stock...</span> // handle issue here
const selectedItem = selectedChild.children[this.state.itemSelected];【讨论】：
感谢您的输入，但我不确定如何应用解决方案 1，至于解决方案 2，我在返回之前和之后尝试过，它显示相同的错误，我希望你不介意如果你可以向我展示你的答案。 行165 和 length 以检查条件 selectedItem.children.length。这是我目前修复的codesandbox.io/embed/j29k59x4ly?fontsize=14
您发送的链接与我发布的链接相同，您可以 fork 或保存您所做的更改吗？【参考方案2】：
在我调试之后。我发现您的 2 个 API 返回不同的格式。 API 对this.state.items 的响应，都有children 属性。 this.state.items2 的第二个项目的第一个项目没有 children 属性。
在Active2函数中，您可以在setState之前为它格式化items2的数据响应。
这将解决问题。
Active2()
/* This is the way you clone a nested object. You can read here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Deep_Clone */
let newActivelist = JSON.parse(JSON.stringify(this.state.items2))
// Filter item has children only (remvoe "Empty Category")
let newChildren = this.state.items2.children.filter(item => item.children)
// Mutation new activelist
newActivelist.children = newChildren
this.setState( activelist: newActivelist); //CHANGED
克隆嵌套对象的另一个选项是使用_.cloneDeep() of lodash 库
import _ from 'lodash'
let newActivelist = _.cloneDeep(this.state.items2)
【讨论】：
以上是关于js 怎么利用循环添加函数？的主要内容，如果未能解决你的问题，请参考以下文章