2017-10-11 23 views
0

タグをターゲットにしようだから私は、このプロジェクトのイムが取り組んで持っている、と私は当たってるバリケードが<li>要素内の特定の<i>タグをターゲットにし、別の<li>内の別の特定の<i>の要素でそれを一致さ。 <li>要素をクリックして値を配列に格納し、別の<li>タグの<i>要素が一致するかどうかをチェックすることで選択します。私は$(this).children().innerHTMLがこれらの要素を対象とする正しい方法だとは思わない。特定のクラス名

Link to jsfiddle

以下のコード:

let cards = [ 
    "diamond", 
    "leaf", 
    "cube", 
    "bomb", 
    "bicycle", 
    "anchor", 
    "paper-plane-o", 
    "bolt", 
    "diamond", 
    "leaf", 
    "cube", 
    "bomb", 
    "bicycle", 
    "anchor", 
    "paper-plane-o", 
    "bolt" 
], 
openedCards = [], 
$deck = $(".deck"), 
$card = (".card"), 
$scorePanel = $('#score-panel'), 
$moves = $('.moves'), 
$rating = $("i"), 
$restart = $(".restart"), 
delay = 500, 
match = 0, 
moves = 0, 
amountOfCards = cards.length/2, 
threeStars = amountOfCards + 2, 
twoStars = amountOfCards + 6, 
oneStar = amountOfCards + 10; 


// Shuffle function 
function shuffle(array) { 
    let currentIndex = array.length, 
     temporaryValue, randomIndex; 

    while (currentIndex !== 0) { 
     randomIndex = Math.floor(Math.random() * currentIndex); 
     currentIndex -= 1; 
     temporaryValue = array[currentIndex]; 
     array[currentIndex] = array[randomIndex]; 
     array[randomIndex] = temporaryValue; 
    } 

    return array; 
} 

// Create the new Game 

function newBoard() { 
    let shuffledCards = shuffle(cards); 
    $deck.empty(); 
    match = 0; 
    moves = 0; 

    for (let i = 0; i < cards.length; i++) { 
     $deck.append($('<li class="card"><i class="fa fa-' + cards[i] 
+ '"></i></li>')) 
    } 
    cardClickListener(); 
}; 

let cardClickListener = function() { 
    $deck.find('.card:not(".match, .open")').on("click", function() { 
     let $this = $(this); 
     let card = $this.children().innerHTML; 
     $this.addClass("open show"); 
     openedCards.push(card); 
     console.log(openedCards); 

     if (openedCards.length > 1) { 
      if (card === openedCards[0]) { 
       $deck.find('.open').addClass('match'); 
       setTimeout(function() { 
        $deck.find('.match').removeClass('open show'); 
       }, delay); 
      } 
     } 
    }); 
}; 

newBoard(); 
+2

HTMLとデモを投稿してください。 –

+0

あなたは '$(this).find(" i.myClassName ")'のようなものを試しましたか? –

+0

jsfiddleを投稿しました。私はスペンサーを試してみましょう – logikevcoder

答えて

0

[OK]を、私はそれを考え出しました。私は空の配列に値を格納するカード変数をプッシュすることができた、その時点で

let card = $(this).children("i").attr("class");

と私の特定のカードを対象としなければなりませんでした。