Сравнение div на идентичность классов

Question

Есть приложение на react в котором есть блок в котором находится еще 16 закрытых блоков с классом hide, каждые два блока так же имеют одинаковый класс - это класс цвета. Задача такая, нужно сделать так, что бы при нажатии на блок он открывался т.е. показывал цвет. И так же при нажатии на следующий. И если классы - цвета совпадают, то оба блока исчезают... Не могу понять как сравнить классы блоков. Пытался по атрибутам, тоже ничего. Все цветные блоки идут не по порядку.. Подскажите кто знает как их можно сравнить?

Вот что есть:

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      squares: Array(16).fill(null),
      count: 0
    }
  }
  
  clickHandler = event => {
    let data = event.target.getAttribute('data');
    let currentSquere = this.state.squares;
    if (currentSquere[data] === null) {
      if (currentSquere[data] = (this.state.count % 2 === 0)) {
        document.querySelectorAll('.grid').forEach(elem => {
          elem.classList.add('hide');
        })
      }

      this.setState({ count: this.state.count + 1 });
      this.setState({ squares: currentSquere });
      event.target.classList.remove('hide');
      console.log(data);
    }

  }

  render() {
    return (
      <div className="block">
        <div className="grid red hide" onClick={this.clickHandler} data='0'>{this.state.squares[0]}</div>
        <div className="grid orange hide" onClick={this.clickHandler} data='1'>{this.state.squares[1]}</div>
        <div className="grid teal hide" onClick={this.clickHandler} data='2'>{this.state.squares[2]}</div>
        <div className="grid blue hide" onClick={this.clickHandler} data='3'>{this.state.squares[3]}</div>
        <div className="grid green hide" onClick={this.clickHandler} data='4'>{this.state.squares[4]}</div>
        <div className="grid red hide" onClick={this.clickHandler} data='5'>{this.state.squares[5]}</div>
        <div className="grid teal hide" onClick={this.clickHandler} data='6'>{this.state.squares[6]}</div>
        <div className="grid orange hide" onClick={this.clickHandler} data='7'>{this.state.squares[7]}</div>
        <div className="grid blue hide" onClick={this.clickHandler} data='8'>{this.state.squares[8]}</div>
        <div className="grid yellow hide" onClick={this.clickHandler} data='9'>{this.state.squares[9]}</div>
        <div className="grid black hide" onClick={this.clickHandler} data='10'>{this.state.squares[10]}</div>
        <div className="grid yellow hide" onClick={this.clickHandler} data='11'>{this.state.squares[11]}</div>
        <div className="grid gray hide" onClick={this.clickHandler} data='12'>{this.state.squares[12]}</div>
        <div className="grid gray hide" onClick={this.clickHandler} data='13'>{this.state.squares[13]}</div>
        <div className="grid black hide" onClick={this.clickHandler} data='14'>{this.state.squares[14]}</div>
        <div className="grid green hide" onClick={this.clickHandler} data='15'>{this.state.squares[16]}</div>
      </div>
    )
  }
}

Answer 1

Может запустить функцию в каждый клик, которая будет обходить открытые классы?

Вроде бы это document.getElementsByClassName

Она, кажется, возвращает массив. И если в нем более 1 - го элемента, то их закрываешь

БЛОГ НА HUSL

Сравнение div на идентичность классов

Ответы (1 шт):