Chrome中的錶行爲

我正在創建一個簡單的內存遊戲，並且由於某些原因，我在Chrome表中添加和刪除類時表格單元格展開。有人可以告訴我爲什麼會發生這種情況嗎？這是我用來添加和刪除點擊類的腳本。這是整個小提琴。 http://jsfiddle.net/stoney265/4XznK/Chrome中的錶行爲

$('td').click(function() { 
    if ($(this).hasClass('clicked') || $(this).hasClass('completed')) { 
     $(this).stopPropagation(); 
     $(this).preventDefault(); 
     return; 
    } 
    $(this).addClass('clicked'); 
    tempArr.push($(this).text()); 
    var len = tempArr.length; 
    if (len > 1) { 
     if (tempArr[0] === tempArr[1]) { 
      alert("Good job!"); 
      $('.clicked').addClass('completed'); 
      $('.completed').removeClass('clicked'); 
      winCounter = winCounter + 1; 
     } else { 
      alert("Try again!"); 
      $('.clicked').removeClass('clicked'); 
     } 
     tempArr.splice(0, 2); 
    } 
    if (winCounter === countCells/2) { 
     alert('You won!'); 
    } 
    console.log(countCells, winCounter); 
});

來源

2013-06-26 user2449973

達到預期的效果嘗試從你的CSS類取出'文本indent'屬性。 – mohkhan

@mohkhan解決了它，有沒有其他的方式來隱藏文字，直到它被點擊？ – user2449973

將背景顏色設置爲黑色，或將文本顏色設置爲白色http://jsfiddle.net/4XznK/13/ – user20232359723568423357842364

的text-indent屬性導致了這一問題。

您可以通過更改背景爲黑色或文字顏色爲白色

http://jsfiddle.net/4XznK/13/

table td { 
    border: 1px solid black; 
    height: 40px; 
    width: 30px; 
    text-align: center; 
    overflow: hidden; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    cursor: default; 
    /* background black */ 
    background-color: #000; 
} 
.clicked { 
    text-indent: 0; 
    text-align: center; 
    height: 40px; 
    width: 30px; 
    table-layout: fixed; 
    white-space: nowrap; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    cursor: default; 
    /* background white */ 
    background-color: #fff; 
} 
.completed { 
    background-color: white; 
    overflow: hidden; 
    height: 40px; 
    width: 30px; 
    table-layout: fixed; 
    white-space: nowrap; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    cursor: default; 
}

來源

2013-06-26 20:36:38 user20232359723568423357842364

Chrome中的錶行爲

回答

相關問題