Question

我正在编写一个简单的脚本，希望更改按钮值然后单击它。按钮的值来自数组。

这就是我的想象，它是如何支持的。假设脚本从数组中获取id，使用此id设置属性，然后单击该按钮。由于闭包，此代码无法正常工作。它只点击一次。

var productList = ['43', '64', '68'];


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

  let btn = document.querySelector('.addProduct');
  btn.setAttribute('itemprop', productList[i]);
  btn.click();

}

然后我写了一些关于封闭的东西，但是它并没有。

var funcs = [];

function changeProdBtnAndClick(i) {

  let btn = document.querySelector('.addProduct');
  btn.setAttribute('itemprop', productList[i]);
  btn.click();

}

for (var i = 0; i < productList.length; i++) {
  funcs[i] = changeProdBtnAndClick(i);
} 

for (var j = 0; j < productList.length; j++) {
  funcs[j]();                         
}

使用此代码，它也只需单击一次，然后出现错误

未捕获的TypeError：funcs [j]不是函数

EDITED ：所以我处理了我的代码，并添加了评论建议，但它仍然无效：

let funcs = [];

var changeProdBtnAndClick = function(i) {

  let btn = document.querySelector('.addProduct');
  btn.setAttribute('itemprop', productList[i]);
  btn.click();

  return 'added ' + productList[i];
}

for (var i = 0; i < productList.length; i++) {
  return funcs.push(changeProdBtnAndClick(i));
} 

for (var j = 0; j < productList.length; j++) {
  return funcs[j]();                        
}

这段代码看起来如何？

Answer 1

如果你有一个带有.addProduct类的正确DOM元素，你的原始代码就可以了。在这里，我添加了一个事件处理程序来监听按钮单击，然后打印单击到日志的按钮。您可以在下面的代码段中看到正确设置的属性。也许您的点击处理程序存在问题，或者您还没有设置问题？

＆＃13;

var productList = ['43', '64', '68'];

let btn = document.querySelector('.addProduct');

btn.addEventListener('click', function() {
  console.log( this );
});

for (var i = 0; i < productList.length; i++) {
  btn.setAttribute('itemprop', productList[i]);
  btn.click();
}

＆＃13;

<button class="addProduct">Button</button>

＆＃13;

循环创建单击按钮事件

1 个答案: