後ほど宣言された別のスコープから$（this）を使用する方法はありますか？

-1

これは私のコードです。それは、2枚のカードを反転させて一致させることを基本としたカードメモリゲームです。

まず、クリックイベント関数のスコープから$（this）を使用するために変数$ disを定義するにはどうすればよいですか？ https://jsfiddle.net/z1fzfu69/

私が持っているもう一つの問題は、私のコードが一致したとして、私がクリックされた2枚のカードを取得し、アレイ内に置くとすることになっているカードのすべてを見つけることです：

var checkMatch = function(){ 
    if ($clicked.length > 1){ 
     if ($card1 === $card2){ 
      $dis.toggleClass('match'); 
      $matched.push($clicked); 
      console.log('MATCH'); 
      $clicked = []; 
      console.log($matched); 
      console.log($clicked); 
     }else { 
      $clicked = []; 
      $('.card').removeClass('open show'); 
      console.log('NOT A MATCH!') 
     }; 
    }else{ 

    }; 
};

はここで完全なプロジェクトですそれらを比較する。しかし、それだけですべての "マッチ"として出てくる。

出典

2017-11-27 Sparrky

申し訳ありません私はあなたのコードを修正する場合、

あなたの質問は、たったの約$（この）で昨日寝坊。私はあなたのコードを探すとき

しかし、私はいくつかの間違いを見つけたので、私はそれらを修正だけではなく（ジャストスリープまでの時間を殺す）あなたの質問に答えることにした

samanimeはよくあなたの質問に答えるので、私はそれをもう一度説明しないでください。

ここに私のコード。醜く見えるが、私はできるだけシンプルにした。多分あなたはここでたくさん学ぶことができます。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Matching Game</title> 
    <meta name="description" content=""> 
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda"> 
    <!--<link rel="stylesheet" href="css/app.css">--> 
    <style> 
    html { 
    box-sizing: border-box; 
} 

*, 
*::before, 
*::after { 
    box-sizing: inherit; 
} 

html, 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    /*background: #ffffff url('../img/geometry2.png'); Background pattern from Subtle Patterns */ 
    font-family: 'Coda', cursive; 
} 

.container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 

h1 { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
} 

/* 
* Styles for the deck of cards 
*/ 

.deck { 
    width: 660px; 
    min-height: 680px; 
    background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%); 
    padding: 32px; 
    border-radius: 10px; 
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5); 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    margin: 0 0 3em; 
} 

.deck .card { 
    height: 125px; 
    width: 125px; 
    background: #2e3d49; 
    font-size: 0; 
    color: #ffffff; 
    border-radius: 8px; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); 
} 

.deck .card.open { 
    transform: rotateY(0); 
    background: #02b3e4; 
    cursor: default; 
} 

.deck .card.show { 
    font-size: 33px; 
} 

.deck .card.match { 
    cursor: default; 
    background: #02ccba; 
    font-size: 33px; 
} 

.deck .card.wrong { 
    animation: shake 1s cubic-bezier(0.075, 0.82, 0.165, 1) both; 
} 

.wrong { 
    -webkit-animation-name: wiggle; 
    -ms-animation-name: wiggle; 
    -ms-animation-duration: 1000ms; 
    -webkit-animation-duration: 1000ms; 
    -webkit-animation-iteration-count: 1; 
    -ms-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease-in-out; 
    -ms-animation-timing-function: ease-in-out; 
} 

@keyframes wiggle { 
    0% {transform: rotate(10deg);} 
    25% {transform: rotate(-10deg);} 
    50% {transform: rotate(20deg);} 
    75% {transform: rotate(-5deg);} 
    100% {transform: rotate(0deg);} 
} 

/* 
* Styles for the Score Panel 
*/ 

.score-panel { 
    text-align: left; 
    width: 345px; 
    margin-bottom: 10px; 
} 

.score-panel .stars { 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    margin: 0 5px 0 0; 
} 

.score-panel .stars li { 
    list-style: none; 
    display: inline-block; 
} 

.score-panel .restart { 
    float: right; 
    cursor: pointer; 
} 
.loading{ 
    color: white; 
    position: absolute; 
    left: 35%; 
    top: 50%; 
} 
.loading span{ 
    font-size: 72px; 
    font-weight: bold; 
} 
    </style> 
</head> 
<body> 

    <div class="container"> 
     <header> 
      <h1>Matching Game</h1> 
     </header> 

     <section class="score-panel"> 
      <ul class="stars"> 
       <li><i class="fa fa-star"></i></li> 
       <li><i class="fa fa-star"></i></li> 
       <li><i class="fa fa-star"></i></li> 
      </ul> 

      <span class="moves">0</span> Moves 

      <div class="restart"> 
       <i class="fa fa-repeat"></i> 
      </div> 
     </section> 

     <ul class="deck"></ul> 

    </div> 
    <div class="loading"><i class="fa fa-refresh fa-spin fa-5x fa-fw"></i> <span class="msg">Loading...</span></div> 

    <script 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
    <!--<script src="js/app.js"></script>--> 
    <script> 
    $(function(){ 
     var clicked = []; 
     var preventClicked = false; 
     var icons = ["fa-diamond", "fa-anchor", "fa-paper-plane-o", "fa-bolt", "fa-cube", "fa-leaf", "fa-bicycle", "fa-bomb"]; //must be 8 

     function createGame(icons){ 
      if(icons.length == 8){ 
       $('.deck').html(''); 
       var box = 2* icons.length; 
       var num = -1; 
       for(a=0; a< icons.length; a++){ 
        $('.deck').append('<li class="card" p="'+ a +'"><i class="fa '+ icons[a] +'"></i></li>'); 
        $('.deck').append('<li class="card" p="'+ a +'"><i class="fa '+ icons[a] +'"></i></li>'); //twice per icon 
       } 
       setTimeout(function(){ 
        $('.restart').click(); //shuffle now 
        $('.loading').hide(); 
       }, 500) 
      }else{ 
       alert("error: icon must be 8"); 
      } 
     } 

     createGame(icons); //init the game 

     // Shuffle function 
     $('.restart').click(function() { 
      var cards = $('.deck').find('.card'); 
      cards.removeClass('show open match'); 
      cards.sort(function() { 
       return Math.random() - .5; 
      }); 
      $('.deck').append(cards); 
     }); 


     // Click event that runs functions 
     $('.deck').on('click', '.card:not(.match):not(.open)', function(e){ //prevent match and open being clicked again 
      if(preventClicked == false){ 
       preventClicked = true; 
       $(this).addClass('open show'); 
       clicked.push(e.target); 
       if(clicked.length > 1){ 
        $('.moves').text(parseInt($('.moves').text()) + 1); 
        //checkMatch 
        if($(clicked[0]).attr('p') == $(clicked[1]).attr('p')){ 
         $(this).addClass('match'); 
         $(clicked[0]).addClass('match'); 
         $(clicked[1]).addClass('match'); 
         clicked = []; 
         preventClicked = false; 
        }else{ 
         setTimeout(function(){ 
          $(clicked[0]).removeClass('open show'); 
          $(clicked[1]).removeClass('open show'); 
          clicked = []; 
          preventClicked = false; 
         }, 800); 
        } 
       }else{ 
        preventClicked = false; 
       } 
      }    
     }); 
    }); 
    </script> 
</body> 
</html>

出典

2017-11-28 05:12:51 plonknimbuzz

うわー、ありがとう、あなたのバージョンははるかに良く機能し、文字通り私のコードは冗談のように見えます。私はあなたをアップアップしますが、十分な担当者はいません。再度、感謝します。 – Sparrky

$disは、クリックの文脈で$(this)に等しくするいくつかの方法があります。

最も簡単なのは、$disという名前のグローバル変数（または少なくとも両方が共有するスコープ内にある）をクリックし、checkMatch()を呼び出す前にクリックイベントで$dis = $(this)と設定することです。

let $dis; 
$('.card').click(() => { 
    $dis = $(this); 
    checkMatch(); 
});

別の、おそらくクリーナーアプローチは、単にcall()関数とthis渡しあります。

$('.card').click(() => { 
    checkMatch.call(this); 
}); 

var checkMatch = function(){ 
    if ($clicked.length > 1){ 
    if ($card1 === $card2){ 
     $(this).toggleClass('match'); 
     $matched.push($clicked); 
     console.log('MATCH'); 
     $clicked = []; 
     console.log($matched); 
     console.log($clicked); 
    }else { 
     $clicked = []; 
     $('.card').removeClass('open show'); 
     console.log('NOT A MATCH!') 
    }; 
    } else { 

    }; 
};

をcall()を使用して、最初のパラメータがthisは、関数の内部で意味べきものです：あなたは、あなたの代わりに直接$(this)を使用することができ、全く$disを使用する必要はありません。

出典

2017-11-27 18:43:47 samanime

ありがとうございます！投稿の最後に記載した私の問題を修正する方法はありますか？それは私の大きな問題なので、私はそれを感謝します！ – Sparrky

後ほど宣言された別のスコープから$（this）を使用する方法はありますか？

答えて

関連する問題