如何從祖父中刪除課程div

Question

我有這樣的代碼。這裏只是爲了說明它是如何工作的。我想比較卡片時出現問題。當我點擊第一張和第二張牌時，他們不匹配，他們的祖父div應該刪除一個翻轉瓦片的課程。第二件事，我點擊同一張牌兩次，它會返回「贏」。如何解決這個問題，並使這段代碼看起來乾淨？

{ 
 
    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); 
     } 
    } 
    } 

如果您的模板會把data-name="${id}"的祖父/根div，它會都變得更簡單一些：那麼你只需要與div，而不是img：

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，但它在全局範圍內執行，其中變量未定義。所以我使用綁定，將其綁定到函數。

爲了確保在猜測中有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>