[英]Hide the text of a button without changing the text using Jquery
我正在使用Jquery創建一個記憶游戲,其中在加載頁面時,可以看到16個按鈕的正方形網格,並為它們隨機分配了1到8的值,但是用戶看不到這些值。 單擊一個塊會在該塊上顯示字母或數字。 在給定的時間,只有兩個塊可以顯示字母或數字。 我已經看到許多帖子通過將按鈕的text(值)屬性更改為“”(空白)來隱藏或更改按鈕的文本,但這對我不起作用,因為我需要跟蹤的值按鈕並將值更改為“”對我不利。
這是我的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>
將數字存儲在data-number
屬性中。 然后,您可以嘗試將文本空白,然后只查詢data
屬性。
的HTML
<tr>
<td><input id="b00" name="tile" type="button" data-number="1" value="1" onClick="return swap_tile(this.id)"/></td>
<td><input id="b01" name="tile" type="button" data-number="2" value="2" onClick="return swap_tile(this.id)"/></td>
<td><input id="b02" name="tile" type="button" data-number="3" value="3" onClick="return swap_tile(this.id)"/></td>
<td><input id="b03" name="tile" type="button" data-number="4" value="4" onClick="return swap_tile(this.id)"/></td>
</tr>
JS
您需要做一些重構,但這應該給您一個有關如何實現它的想法。
$('input').on('click', function(){ // or whatever event you want
var value = $(this).data('number'); // get the number
// repopulate the text() with the value obtained
});
偷偷摸摸的方法是為按鈕提供背景顏色,並為文本設置相同的顏色。
即
input{
background-color: blue;
}
並使用
$('#b20').css('color', 'blue');
因此,按照@Tiny Giant所說的,這就是我用來實現所需效果的Jquery。
$(document).ready(function (){
$("button").click(function() {
$(this).css("color", "black");
});
});
我的css文件在加載網頁時將按鈕文本的顏色更改為白色,然后通過單擊按鈕將文本顏色更改為黑色,如下所示:
button {
color: white;
}
使用按鈕代替:
<button id="b33" value="15" onClick="return swap_tile(this.id)"><span>HIDE THE SPAN TEXT</span></button>
將范圍隱藏在按鈕內:
$("#b33 span).hide();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.