Luân phiên các kiểu kích hoạt trên JavaScript

Trong bài học trước, chúng ta đã học cách kích hoạt các ô khi nhấp vào chúng. Bây giờ hãy làm sao để màu sắc luân phiên: ô đầu tiên tô màu đỏ, ô thứ hai - màu xanh lá cây, ô thứ ba - lại màu đỏ và cứ tiếp tục như vậy.

Để giải quyết tác vụ này, chúng ta sẽ cần hai lớp CSS:

css.color1 {
  background: red;
}
.color2 {
  background: green;
}

Hãy triển khai sự luân phiên đã mô tả:

javascriptlet tds = document.querySelectorAll('#table td');

let color = 'color1';
for (let td of tds) {
  td.addEventListener('click', function() {
    if (color == 'color1') {
      color = 'color2'
    } else {
      color = 'color1'
    }
    
    this.classList.add(color);
  });
}

Luân phiên nhiều màu từ mảng

Bây giờ giả sử chúng ta muốn luân phiên không phải hai màu, mà là một số lượng bất kỳ. Để làm điều này, hãy lưu trữ một mảng các lớp CSS:

javascriptlet colors = ['color1', 'color2', 'color3'];

Hãy viết màu sắc cho các lớp của chúng ta:

css.color1 {
  background: red;
}
.color2 {
  background: green;
}
.color3 {
  background: yellow;
}

Và bây giờ hãy triển khai sự luân phiên:

javascriptlet tds = document.querySelectorAll('#table td');

let i = 0;
let colors = ['color1', 'color2', 'color3'];

for (let td of tds) {
  td.addEventListener('click', function() {
    this.classList.add(colors[i]);
    
    i++;
    if (i == colors.length) {
      i = 0;
    }
  });
}