祖父divからクラスを削除する方法

Question

私はこのようなコードを持っています。それがどのように機能するかを示すためだけにここにあります。カードを比較したいときに問題が表示されます。最初のカードと2番目のカードをクリックすると、彼らの祖父divと一致しないdivをタイルを反転させるクラスを削除する必要があります。 2つ目は、同じカードを2回クリックして「勝ち」を返します。これを修正してこのコードをきれいに見えるようにするには？

{ 
 
    let guesses = []; 
 
    let tries = 0; 
 
    const doubleArrVal = arr => arr.concat(arr); 
 
    const addFlipEffect = (e) => { 
 
    let target = e.currentTarget; 
 
    if (!target.classList.contains("tile--static")) { 
 
     target.classList.add("tile--active"); 
 
    } 
 
    return target; 
 
    }; 
 
    const addManyListeners = (collection, e, fn) => { 
 
    for (let i = 0; i < collection.length; i++) { 
 
     collection[i].addEventListener(e, fn, false); 
 
    } 
 
    }; 
 
    const randomize = (arr) => { 
 
    for (let i = 0; i < arr.length; i++) { 
 
     const j = Math.floor(Math.random() * (i + 1)); 
 
     const tmp = arr[i]; 
 
     arr[i] = arr[j]; 
 
     arr[j] = tmp; 
 
    } 
 
    return arr; 
 
    }; 
 
    const prepareArray = (ammount) => { 
 
    let imgNames = ["angular", "bootstrap", "css", "foundation", "github", "grunt", "html", "ruby", "jquery", "less", "nodejs", "sass"]; 
 
    imgNames = imgNames.slice(0, ammount); 
 
    const doubled = doubleArrVal(imgNames); 
 
    return randomize(doubled); 
 
    }; 
 
    const createMarkUp = (id) => { 
 
    const markUp = `<div class="tile tile--game"> 
 
     <div class="tile__side tile__side--front"> 
 
     </div> 
 
     <div class="tile__side tile__side--back"> 
 
     <img src="img/${id}.svg" alt="${id}" class="tile__img" data-name="${id}"> 
 
     </div> 
 
    </div>`; 
 
    return markUp; 
 
    }; 
 
    const createCards = (ammount) => { 
 
    const container = document.getElementById("gameContainer"); 
 
    const preparedCards = prepareArray(ammount); 
 
    preparedCards.map(card => { 
 
     const cardElement = createMarkUp(card); 
 
     container.innerHTML += cardElement; 
 
    }); 
 
    return container; 
 
    }; 
 
    // Problem is here 
 
    const compare = (e) => { 
 
    const userPick = e.currentTarget; 
 
    let image = userPick.querySelector("[data-name]"); 
 
    guesses.push(image); 
 
    tries++; 
 
    if (tries === 2) { 
 
     if (guesses[0].dataset.name === guesses[1].dataset.name) { 
 
     console.log("win"); 
 
     } else { 
 
     setTimeout(() => { 
 
      guesses[0].parentNode.parentNode.classList.remove("tile--active"); 
 
      guesses[1].parentNode.parentNode.classList.remove("tile--active"); 
 
     }, 500); 
 
     } 
 
     guesses = []; 
 
     tries = 0; 
 
    } 
 
    } 
 
    const startGame = (level) => { 
 
    const gameCards = createCards(4); 
 
    addManyListeners(gameCards.children, "click", addFlipEffect); 
 
    addManyListeners(gameCards.children, "click", compare); 
 
    }; 
 
    startGame(); 
 
}

<div id ="gameContainer"></div>

Answer 1

私はユニークな選択を容易にするために、guessesのために設定を使用します。

let guesses = new Set; 

    //... 

    const compare = (e) => { 
    const userPick = e.currentTarget; 
    let image = userPick.querySelector("[data-name]"); 
    guesses.add(image); 
    if (guesses.size === 2) { // guaranteed to be 2 different images 
     if (new Set(Array.from(guesses, guess => guess.dataset.name)).size == 1) { 
     console.log("win"); 
     guesses = new Set; 
     } else { 
     setTimeout(() => { 
      for (let guess of guesses) { 
      guess.parentNode.parentNode.classList.remove("tile--active"); 
      } 
      guesses = new Set; // only clear here 
     }, 500); 
     } 
    } 
    } 

テンプレートは、祖父/ルートdivにdata-name="${id}"を置く場合は、それが希望すべてが少しシンプルになります：imgではなくdivで作業するだけです：

const createMarkUp = (id) => { 
    const markUp = `<div class="tile tile--game" data-name="${id}"> 
     <div class="tile__side tile__side--front"> 
     </div> 
     <div class="tile__side tile__side--back"> 
     <img src="img/${id}.svg" alt="${id}" class="tile__img"> 
     </div> 
    </div>`; 
    return markUp; 
    }; 

    //... 

    const compare = (e) => { 
    guesses.add(e.currentTarget); 
    if (guesses.size !== 2) return; 
    if (new Set(Array.from(guesses, guess => guess.dataset.name)).size == 1) { 
     console.log("win"); 
     guesses = new Set; 
     return; 
    } 
    setTimeout(() => { 
     for (let guess of guesses) { 
     guess.classList.remove("tile--active"); 
     } 
     guesses = new Set; 
    }, 500); 
    } 

Answer 2

これはスコープの誤差です。タイムアウトは変数guessesを使用しますが、グローバルスコープで実行されます。変数は未定義です。だから私は関数にバインドするためにbindを使いました。

推測に2つの異なる要素があることを確認するには、値をテストする前にテストしてください。

{ 
 
    let guesses = []; 
 
    let tries = 0; 
 
    const doubleArrVal = arr => arr.concat(arr); 
 
    const addFlipEffect = (e) => { 
 
    let target = e.currentTarget; 
 
    if (!target.classList.contains("tile--static")) { 
 
     target.classList.add("tile--active"); 
 
    } 
 
    return target; 
 
    }; 
 
    const addManyListeners = (collection, e, fn) => { 
 
    for (let i = 0; i < collection.length; i++) { 
 
     collection[i].addEventListener(e, fn, false); 
 
    } 
 
    }; 
 
    const randomize = (arr) => { 
 
    for (let i = 0; i < arr.length; i++) { 
 
     const j = Math.floor(Math.random() * (i + 1)); 
 
     const tmp = arr[i]; 
 
     arr[i] = arr[j]; 
 
     arr[j] = tmp; 
 
    } 
 
    return arr; 
 
    }; 
 
    const prepareArray = (ammount) => { 
 
    let imgNames = ["angular", "bootstrap", "css", "foundation", "github", "grunt", "html", "ruby", "jquery", "less", "nodejs", "sass"]; 
 
    imgNames = imgNames.slice(0, ammount); 
 
    const doubled = doubleArrVal(imgNames); 
 
    return randomize(doubled); 
 
    }; 
 
    const createMarkUp = (id) => { 
 
    const markUp = `<div class="tile tile--game"> 
 
     <div class="tile__side tile__side--front"> 
 
     </div> 
 
     <div class="tile__side tile__side--back"> 
 
     <img src="img/${id}.svg" alt="${id}" class="tile__img" data-name="${id}"> 
 
     </div> 
 
    </div>`; 
 
    return markUp; 
 
    }; 
 
    const createCards = (ammount) => { 
 
    const container = document.getElementById("gameContainer"); 
 
    const preparedCards = prepareArray(ammount); 
 
    preparedCards.map(card => { 
 
     const cardElement = createMarkUp(card); 
 
     container.innerHTML += cardElement; 
 
    }); 
 
    return container; 
 
    }; 
 
    const compare = (e) => { 
 
    const userPick = e.currentTarget; 
 
    let image = userPick.querySelector("[data-name]"); 
 
    guesses.push(image); 
 
    tries++; 
 
    if (tries === 2) { 
 
     if (guesses[0] !== guesses[1] && guesses[0].dataset.name === guesses[1].dataset.name) { 
 
     console.log("win"); 
 
     } else { 
 
     setTimeout(((guesses) => { 
 
      guesses[0].parentNode.parentNode.classList.remove("tile--active"); 
 
      guesses[1].parentNode.parentNode.classList.remove("tile--active"); 
 
     }).bind(null, guesses), 500); 
 
     } 
 
     guesses = []; 
 
     tries = 0; 
 
    } 
 
    } 
 
    const startGame = (level) => { 
 
    const gameCards = createCards(4); 
 
    addManyListeners(gameCards.children, "click", addFlipEffect); 
 
    addManyListeners(gameCards.children, "click", compare); 
 
    }; 
 
    startGame(); 
 
}

<div id="gameContainer"></div>