我正在使用 Jquery 创建一个内存游戏，在加载页面时，可以看到一个由 16 个按钮组成的正方形网格，其中随机分配了 1 到 8 的值，但这些值对用户不可见。单击一个 block 会在该 block 上显示一个字母或一个数字。在给定时间只有两个 block 可以显示字母或数字。我看到很多帖子通过将按钮的文本(值)属性更改为“”(空白)来隐藏或更改按钮的文本，但这对我不起作用，因为我需要跟踪值单击按钮并将值更改为“”对我没有好处。
这是我的 HTML:
<!Doctype html>
<html>
<head>
<title>Memory Game</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="./hwk9.js"></script>
<link rel="stylesheet" type="text/css" href="./hwk9.css">
</head>
<body>
<h1>Memory Game</h1>
<form id="memory_game" method="post" action="">
<table>
<!--ROW 0-->
<tr>
<td><input id="b00" name="tile" type="button" value="1" onClick="return swap_tile(this.id)"/></td>
<td><input id="b01" name="tile" type="button" value="2" onClick="return swap_tile(this.id)"/></td>
<td><input id="b02" name="tile" type="button" value="3" onClick="return swap_tile(this.id)"/></td>
<td><input id="b03" name="tile" type="button" value="4" onClick="return swap_tile(this.id)"/></td>
</tr>
<!--ROW 1-->
<tr>
<td><input id="b10" name="tile" type="button" value="5" onClick="return swap_tile(this.id)"/></td>
<td><input id="b11" name="tile" type="button" value="6" onClick="return swap_tile(this.id)"/></td>
<td><input id="b12" name="tile" type="button" value="7" onClick="return swap_tile(this.id)"/></td>
<td><input id="b13" name="tile" type="button" value="8" onClick="return swap_tile(this.id)"/></td>
</tr>
<!--ROW 2-->
<tr>
<td><input id="b20" name="tile" type="button" value="9" onClick="return swap_tile(this.id)"/></td>
<td><input id="b21" name="tile" type="button" value="10" onClick="return swap_tile(this.id)"/></td>
<td><input id="b22" name="tile" type="button" value="11" onClick="return swap_tile(this.id)"/></td>
<td><input id="b23" name="tile" type="button" value="12" onClick="return swap_tile(this.id)"/></td>
</tr>
<!--ROW 3-->
<tr>
<td><input id="b30" name="tile" type="button" value="13" onClick="return swap_tile(this.id)"/></td>
<td><input id="b31" name="tile" type="button" value="14" onClick="return swap_tile(this.id)"/></td>
<td><input id="b32" name="tile" type="button" value="15" onClick="swap_tile(this.id)"/></td>
<td><input id="b33" name="tile" type="button" value="" onClick="return swap_tile(this.id)"/></td>
</tr>
</table>
</form>
</body>
</html>
这是我的 Javascript/Jquery
// Call the shuffle function when entire page has been loaded
$(document).ready(function ()
{
var combos = ["1","2","3","4","5","6","7","8","1","2","3","4","5","6","7","8"]
var btns = document.getElementById("memory_game");
combos = shuffle(combos)
for (var i = 0 ; i <= 15 ; i ++)
{
btns[i].value = combos[i];
}
$("td").hide(3000);
});
/* Function that psuedo randomly shuffles the memory game board */
function shuffle(array)
{
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
// while there remain elements to shuffle
while (currentIndex !== 0)
{
// Pick an element that remains
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
//Swap that element with the current element
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
最佳答案
要隐藏文本，请使用 rgba(0,0,0,0) 设置文本颜色，其中 a 代表 alpha，我们给出的值为0(隐藏)。
要显示文本，请将颜色设置为 ''，这将删除设置并将文本恢复为默认颜色。
var count = 0;
document.getElementById('demo').onclick = function(){
this.style.color = ++count % 2 ? 'rgba(0,0,0,0)' : '';
}<button id="demo">This will disappear</button>如果您喜欢 jQuery，您可以使用下面的示例。
var count = 0;
$('#demo').click(function(){
$(this).css('color', ++count % 2 ? 'rgba(0,0,0,0)' : '');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">This will disappear</button>关于javascript - 使用 Jquery 隐藏按钮的文本而不更改文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33376720/