jQuery addClass example

Change class name on click in jQuery

HTML

<ul>
  <!-- ここにカード要素が挿入される -->
</ul>

CSS

ul {
  padding: 0;
  overflow: hidden;
  border: 10px #CCC solid;
}

li {
  list-style: none;
  float: left;
  width: 25%;
  background-color: #EEE;
  border-top: 2px #CCC solid;
  border-right: 2px #CCC solid;
  font-size: 20px;
  font-weight: bold;
  line-height: 75px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
li:nth-child(-n + 4) {
  border-top: none;
}
li:nth-child(4n) {
  border-right: none;
}
li.opened {
  color: #EEE;
  background-color: #000;
}

JavaScript

$(function () {
	// コンテナ要素を取得
	var $container = $('ul')
  
  // 開いたカード要素を保存しておく配列
  var openedCardElements = []
  
  // カード番号の最大値
  // カードの枚数はこの変数の２倍となる
  var total = 8
  
  // シャッフルしたカード番号の配列を生成する
  function createShuffledNumbers (total) {
  	var numbers = []
  
  	for (var i = 1; i <= total; i++) {
	    numbers.push(i, i)
  	}
        
		return numbers.sort(function () {
			return Math.random() - Math.random()
    })
  }

  // カード番号を受け取り、対応するカード要素を生成する
	function createCardElement (number) {
    var $card = $('<li>') // li要素を生成
    	.data('number', number) // data属性を設定
    	.text('?') // テキストを設定
      .on('click', function () { // イベントリスナーを設定
      	// すでに開かれている場合は何もせずに終了
      	if ($card.hasClass('opened')) {
        	return
        }
        
        // すでに２枚のカードが開かれている場合は何もせず終了
        // 一度に３枚目が開かれることを防止する
        if (openedCardElements.length === 2) {
        	return
        } 
        
        // この時点で、１枚目または２枚目のカードが開かれたことになる
        $card
          .addClass('opened') // CSSクラスの設定
          .text($card.data('number')) // カード番号の表示（data属性を取得して、テキストとして設定）

        if (openedCardElements.length) { // クリックしたカードが２枚目である場合
					openedCardElements.push($card) // クリックしたカードに追加する
          var isSameNuber = compareCards()
          
          if (isSameNuber) { // ２枚のカードの番号が同じの場合
            // クリックを受け付けないように、イベントリスナーを解除する
          	openedCardElements.forEach(function (openedCardElement) {
            	openedCardElement.off('click')
            })
            
            // 開かれたカードをリセットする
            openedCardElements = []

            // すべてのカードが開かれた場合はアラートを表示する
						if (areAllCardsOpened()) {
              // 最後のカードが開かれてからアラートを表示するため、
              // alertの表示を遅延させる
            	setTimeout(function () {
              	alert('Congratulations!')
              }, 0)
            }
          } else { // ２枚のカードの番号が違う場合
          	setTimeout(function () { // ２枚のカードを１秒間表示して
              // カード番号を隠す
              openedCardElements.forEach(function (openedCardElement)...