Не могу получить мой совет tic-tac-toe, чтобы узнать победителя с изображениями, заменяющими текст «X» и «O»

Question

Вот мой текущий код, который я недавно сделал обновления для замены «X» и «O» s вместо моих маркеров игроков. При этом у меня проблемы с продолжением работы функции getWinner. Я попробовал несколько вещей, но безрезультатно:

$(document).ready(function() { 

var turn = 0; 

    function checkWin() { 
    if ($('#box1').html()===icon && $('#box2').html()===icon &&  $('#box3').html()===icon) { 
     $('#box1, #box2, #box3'); 
     alert(player + ' won!'); 
    } else if ($('#box4').html()===icon && $('#box5').html()===icon && $('#box6').html()===icon) { 
     $('#box4, #box5, #box6'); 
     alert(player + ' won!'); 
    } else if ($('#box7').html()===icon && $('#box8').html()===icon && $('#box9').html()===icon) { 
     $('#box7, #box8, #box9'); 
     alert(player + ' won!'); 
    } else if ($('#box1').html()===icon && $('#box4').html()===icon && $('#box7').html()===icon) { 
     $('#box1, #box4, #box7'); 
     alert(player + ' won!'); 
    } else if ($('#box2').html()===icon && $('#box5').html()===icon && $('#box8').html()===icon) { 
     $('#box2, #box5, #box8'); 
     alert(player + ' won!'); 
    } else if ($('#box3').html()===icon && $('#box6').html()===icon && $('#box9').html()===icon) { 
     $('#box3, #box6, #box9'); 
     alert(player + ' won!'); 
    } else if ($('#box3').html()===icon && $('#box5').html()===icon && $('#box7').html()===icon) { 
     $('#box3, #box5, #box7'); 
     alert(player + ' won!'); 
    } else if ($('#box1').html()===icon && $('#box5').html()===icon && $('#box9').html()===icon) { 
     $('#box1, #box5, #box9'); 
     alert(player + ' won!'); 

    } else if (turn === 9) { 
     alert("It's a draw!"); 
    } 
    } 

    $(".box").click(function handleTurn(event){ 
    if (!$(this).html()) { 
     turn ++; 

     if (turn % 2 === 0) { 
     $(this).html("Vader"); 
     icon = $('<img id="vader" src="darthvader.png" />'); 
     player = "Vader"; 
     } 

     else if (turn % 2 !== 0) { 
     $(this).html("Luke"); 
     icon = $('<img id="luke" src="lukeskywalker.png" />'); 
     player = "Luke"; 
     } 
     $(this).html(icon); 
     checkWin(); 
    } 
    }); 

    $(".btn").click(function resetBoard(event) { 
    $(".box").empty(); 
    turn = 0; 
    }); 

}); 

---

Прежде чем я возился с этим и заменить текст с изображениями, я был в состоянии получить совет признать победитель, вот V1 с только текст:

$(document).ready(function() { 

var turn = 0; 

    function checkWin() { 
    if ($('#box1').html()===icon && $('#box2').html()===icon && $('#box3').html()===icon) { 
     $('#box1, #box2, #box3'); 
     alert(player + ' won!'); 
    } else if ($('#box4').html()===icon && $('#box5').html()===icon && $('#box6').html()===icon) { 
     $('#box4, #box5, #box6'); 
     alert(player + ' won!'); 
    } else if ($('#box7').html()===icon && $('#box8').html()===icon && $('#box9').html()===icon) { 
     $('#box7, #box8, #box9'); 
     alert(player + ' won!'); 
    } else if ($('#box1').html()===icon && $('#box4').html()===icon && $('#box7').html()===icon) { 
     $('#box1, #box4, #box7'); 
     alert(player + ' won!'); 
    } else if ($('#box2').html()===icon && $('#box5').html()===icon && $('#box8').html()===icon) { 
     $('#box2, #box5, #box8'); 
     alert(player + ' won!'); 
    } else if ($('#box3').html()===icon && $('#box6').html()===icon && $('#box9').html()===icon) { 
     $('#box3, #box6, #box9'); 
     alert(player + ' won!'); 
    } else if ($('#box3').html()===icon && $('#box5').html()===icon && $('#box7').html()===icon) { 
    $('#box3, #box5, #box7'); 
     alert(player + ' won!'); 
    } else if ($('#box1').html()===icon && $('#box5').html()===icon && $('#box9').html()===icon) { 
     $('#box1, #box5, #box9'); 
     alert(player + ' won!'); 

    } else if (turn === 9) { 
     alert("It's a draw!"); 
    } 
    } 

    $(".box").click(function handleTurn(event){ 
    if (!$(this).text()) { 
     turn ++; 

     if (turn % 2 === 0) { 
     $(this).html("O"); 
     icon = "O"; 
     player = "Player O"; 
     } 

     else if (turn % 2 !== 0) { 
     $(this).text("X"); 
     icon = "X"; 
     player = "Player X"; 
     } 
     $(this).html(icon); 
     checkWin(); 
    } 
    }); 

    $(".btn").click(function resetBoard(event) { 
    $(".box").empty(); 
    turn = 0; 
    }); 

---

Предложения?

Спасибо!

Answer 1

Вы в настоящее время создает элементы DOM JQuery с

icon = $('<img id="luke" src="lukeskywalker.png" />'); 

линии, в то время как ранее установить HTML в обычный текст. Поэтому вы больше не должны сравнивать .html() вашего ('#box #') es с значком, а скорее с icon.html()