Изменение CSS элемента div при щелчке внутри цикла for JavaScript

Question

У меня есть код для изменения пути клипа элемента div при его нажатии, и я хочу, чтобы путь клипа элемента div изменялся в порядке массива.

код:

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

Однако этот код будет работать только для окончательного исполнения цикла.Я видел несколько примеров того, как это можно исправить, поместив функцию вне цикла.Но это не работает в моем примере.Поэтому, пожалуйста, если кто-нибудь знает, как я могу это исправить, помогите мне.

Answer 1

Вам нужна постоянная внешняя переменная, чтобы отслеживать, сколько раз происходил щелчок - установите css для соответствующего индекса positions и увеличьте индекс:

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