在 for 循环 JavaScript 中单击时更改 div 的 CSS答案

【问题标题】：Changing CSS of a div on click inside a for loop JavaScript在 for 循环 JavaScript 中单击时更改 div 的 CSS
【发布时间】：2018-11-25 20:27:43
【问题描述】：

我有一个代码可以在单击 div 时更改其剪辑路径，并且我希望 div 的剪辑路径按照数组的顺序进行更改。

代码：

for (let i = 0; i < branches.length; i++) {
$('.branch').click(function(){
$(this).css('clip-path', positions[i]);
});
}

但是，此代码只会在循环的最终迭代中运行。我已经看到了一些关于如何通过将函数置于循环之外来解决此问题的示例。但它在我的示例中不起作用。所以，如果有人知道我该如何解决这个问题，请帮助我。

【问题讨论】：

您是否希望每个.branch 在每次点击any .branch 时都发生变化，或者您要查找的具体逻辑是什么？
我希望单击的分支 div 将其剪辑路径更改为位于 positions 数组中的那个。因此，无论您单击哪个 div，它们都将始终转换剪辑路径以便一起构建图像。

标签： javascript for-loop click this clip-path

【解决方案1】：

您需要一个持久的外部变量来跟踪点击发生的次数 - 为适当的positions 索引设置 css，并增加索引：

let clickNumber = 0;
$('.branch').click(function(){
  if (clickNumber >= positions.length) return;
  $(this).css('clip-path', positions[clickNumber++]);
})

【讨论】：

尽管这很有帮助，但它似乎为每个分支分配了它自己从数组中预先确定的值。我希望无论您单击哪个分支，它都将始终按顺序转到它在数组中的路径，以便看起来它正在构建自己，无论您单击分支的顺序如何。如果您知道我可以做到这一点的方法，请回答。
您要查找的内容不清楚，您的意思是在整体点击ith 时，点击的分支会更改为positions[i]，还是什么？
是的，这正是我想要的。无论您单击 div 的顺序如何，它们都会重新定位自己以构建图像。从理论上讲，我想用随机生成的浮动多边形创建一个图像，所以当你点击它们时，它们会一起构建一个图像。