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

时间:2018-11-25 11:42:38

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

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

代码:

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

但是,此代码仅在循环的最终模拟时运行。我已经看到了一些有关如何通过将函数置于循环之外来解决此问题的示例。但这在我的示例中不起作用。因此,如果有人知道我该如何解决,请帮帮我。

1 个答案:

答案 0 :(得分:2)

您需要一个持久性外部变量,以便跟踪单击发生了多少次-为相应的positions索引设置css,并增加索引:

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