jQueryを使った神経衰弱にて、一度正解したトランプをもう一度クリックした際に閉じない様にするにはどうしたら良いでしょうか。

実現したいこと

一度正解しているトランプをもう一度クリックした際に閉じない様にしたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

jQuery

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>07 | 1-jQuery</title>
  <link rel="stylesheet" href="../../00-tools/css/reset.css">
  <link rel="stylesheet" href="../../00-tools/css/base.css">
  <link rel="stylesheet" href="css/style.css">

  <script type="text/javascript" src="js/jquery.js" defer></script>

</head>
<body>
  <ul class="lists clearfix"></ul>
<script defer>
window.addEventListener( 'load' , function(){

  const cardNum = [];
  const totalCard = 16;
  var $cardList  = $(".lists");

  for (var i = 1; i <= totalCard/2; i++){
    cardNum.push(i,i);
  }

  function openCard($card){
    $card.css('pointer-events','none')
         .text($card.data('num'));
  }

  function closeCard($card){
    $card.css('pointer-events','')
         .text('?');
  }

  $(function(){
    cardNum.sort(function(){
      return Math.random() - Math.random();
    })

    .map(function(num){
      return "<li class='unopened' data-num='" + num + "'>?</li>";
    })

    .forEach(function(element){
      $cardList.append(element);
    });
  });

  $('.lists').children('li').on("click", function($openedCard){
    var $openedCard = $(this);
    openCard($openedCard);
    openedCard($openedCard);
  });

  const openedCard = function($openedCard){
    if ($('.firstOpen').length === 0) {
      $openedCard.addClass('firstOpen');
      return;
    }

    $('li').css('pointer-events', 'none');

    setTimeout(function(){
      compareCard($openedCard);
      $('li').css('pointer-events', '');
    }, 1000);
  };

  function compareCard($card){
    var $firstCard = $('.firstOpen'),
        $secondCard = $card,
        firstNum = $firstCard.data('num'),
        secondNum = $secondCard.data('num');

    $firstCard.removeClass('firstOpen');

    if(firstNum === secondNum){
      $firstCard.removeClass('unopened');
      $secondCard.removeClass('unopened');

      if($('.unopened').length === 0){
        alert("Game Over");
      }
    } else {
      closeCard($firstCard);
      closeCard($secondCard);
    }
  }
});
</script>
</body>
</html>

yambejp

2022/09/08 00:51

ES6とjQueryがまざっててちょっと気持ち悪いかんじがしますどっちかに統一する気はないのでしょうか？

take-1917.

2022/09/08 03:27

すみません、まだ勉強を始めたばかりで混ざってしまっている状態です。もしよろしければどの様に統一すればいいのか指導していただけると幸いです

yambejp

2022/09/08 03:35

jQuryの汎用性を重視するのであればES6の書き方をしない ES6の書き方をベースとするならjQueryを排除する

take-1917.

2022/09/08 03:36

ありごとうございます、参考にしてみます

行動規範の内容に同意します

回答1件

ベストアンサー

正解したカードを他のカードと区別できるようなカード毎のフラグがあればいいです。

正解したときに正解したカードのフラグを立てる
クリックされたときにそのカードのフラグが立っていれば何もしない。

今のコードを見ると「クリックされた要素が unopened クラスを持っていなかったら何もしない」でもいいかもしれません。

投稿2022/09/07 23:44

編集2022/09/07 23:55

int32_t

総合スコア20843

take-1917.

2022/09/08 04:40

参考にさせていただきながら取り組んでいるんですが、unopenedというクラスを持っていないものに.css('pointer-events', 'none');をすればいいのかと思い作っているのですが、どうしてもうまくいかないのですが、どうすればいいのか指導していただけると幸いです。

int32_t

2022/09/08 04:48

openedCard() の冒頭で $openedCard.hasClass('unopened') をチェックすればいいかなと思ってましたが、pointer-events でやるなら、 li[data-num].unopened { pointer-events: atuo; } li[data-num] { pointer-events: none; } というスタイルを足すのはいかがでしょうか。

take-1917.

2022/09/08 05:42

すみません、$openedCard.hasClass('unopened') をチェックする方法と、 li[data-num].unopened { pointer-events: atuo; } li[data-num] { pointer-events: none; } というスタイルを足す方法をどちらも試そうとしたのですが、自分が未熟であるため、どこにどの様にスタイルを追加したり、チェックすればいいのか試行錯誤してもうまくいかないので、どうしてそこに追加したらいいのかなどもご教授いただけると幸いです。忙しいと思いますが、時間がある時でいいので回答いただけないでしょうか。

int32_t

2022/09/08 07:36

const openedCard = function($openedCard){ if (!$openedCard.hasClass('unopened')) return; pointer-events の方は、css/style.css の末尾に足すとか、<style> </style> で囲んでHTML中のどこかに置きましょう。

take-1917.

2022/09/09 02:42

ありがとうございます。上記のしかたで動くことができました。returnを記述するのを忘れていて、うまく起動していなかった様です。本当にありがとうございます

行動規範の内容に同意します