Fatal编程技术网
  • javascript/
  • Javascript 使用Jquery隐藏按钮的文本而不更改文本

Javascript 使用Jquery隐藏按钮的文本而不更改文本

javascript jquery html

Javascript 使用Jquery隐藏按钮的文本而不更改文本,javascript,jquery,html,html-input,Javascript,Jquery,Html,Html Input,我正在使用Jquery创建一个记忆游戏，在加载页面时，一个由16个按钮组成的正方形网格是可见的，其中随机分配了1到8个值，但是用户看不到这些值。单击块会显示块上的字母或数字。在给定的时间内，只有两个块可以显示字母或数字。我看过很多帖子，它们通过将按钮的文本（值）属性更改为“”（空白）来隐藏或更改按钮的文本，但这对我不起作用，因为我需要跟踪按钮的值，而将值更改为“”对我没有好处 这是我的HTML： <!Doctype html> <html> <head> &l

我正在使用Jquery创建一个记忆游戏，在加载页面时，一个由16个按钮组成的正方形网格是可见的，其中随机分配了1到8个值，但是用户看不到这些值。单击块会显示块上的字母或数字。在给定的时间内，只有两个块可以显示字母或数字。我看过很多帖子，它们通过将按钮的文本（值）属性更改为“”（空白）来隐藏或更改按钮的文本，但这对我不起作用，因为我需要跟踪按钮的值，而将值更改为“”对我没有好处

这是我的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;
}

//加载整个页面后调用shuffle函数
$（文档）.ready（函数（）
{
风险值组合=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”]
var btns=document.getElementById（“内存游戏”）；
组合=洗牌（组合）

对于（var i=0；i将数字存储在
数据编号
属性中。然后，您可以尝试将文本清空，然后只查询
数据
属性

HTML


将数字存储在
数据编号
属性中。然后您可以按尝试将文本清空，然后只需查询
数据
属性即可

HTML


要隐藏文本，请使用
rgba（0,0,0,0）
设置文本颜色，其中
a
表示alpha，我们给出的值为0（隐藏）

要显示文本，请将颜色设置为
''
，这将删除该设置并将文本恢复为默认颜色



var计数=0；
document.getElementById（'demo'）。onclick=function（）{
this.style.color=++计数%2？'rgba（0,0,0,0）''：；
}


这将消失
要隐藏文本，请使用
rgba（0,0,0,0）
设置文本颜色，其中
a
表示alpha，我们给出的值为0（隐藏）

要显示文本，请将颜色设置为
''
，这将删除该设置并将文本恢复为默认颜色



var计数=0；
document.getElementById（'demo'）。onclick=function（）{
this.style.color=++计数%2？'rgba（0,0,0,0）''：；
}


这将消失
改用按钮：


<button id="b33" value="15" onClick="return swap_tile(this.id)"><span>HIDE THE SPAN TEXT</span></button>


请改用按钮：


<button id="b33" value="15" onClick="return swap_tile(this.id)"><span>HIDE THE SPAN TEXT</span></button>



一种偷偷摸摸的方法是给按钮一个背景色，然后将文本颜色设置为相同的颜色

即

和使用


$('#b20').css('color', 'blue');



一种偷偷摸摸的方法是给按钮一个背景色，然后将文本颜色设置为相同的颜色

即

和使用


$('#b20').css('color', 'blue');



所以，按照@Tiny Giant所说的，这就是我用来实现我想要的效果的Jquery


    $(document).ready(function (){

      $("button").click(function() {

       $(this).css("color", "black");

      });
    });


加载网页时，我的css文件将按钮文本的颜色更改为白色，然后单击按钮将文本颜色显示为黑色，如下所示：


  button {
  color: white;
}



所以，按照@Tiny Giant所说的，这就是我用来实现我想要的效果的Jquery


    $(document).ready(function (){

      $("button").click(function() {

       $(this).css("color", "black");

      });
    });


加载网页时，我的css文件将按钮文本的颜色更改为白色，然后单击按钮将文本颜色显示为黑色，如下所示：


  button {
  color: white;
}



您可以将值保存为JS对象数组，类似于函数确定值是否可见的
{value:1，show:false}
。使用三元运算符，您可以在每次单击按钮
{currentIndex.show？false:true}时更改
show
的值
并在下一行适当地显示或隐藏该值
{currentIndex.show？currentIndex.value:'}
。请告诉我这是否为您指明了正确的方向。首先，在视图中存储数据不是一个好主意。@yarix敏感信息也是如此，但对于一个简单的游戏来说，它就足够了。不需要将其存储在数据库或.json文件中……您可以利用本地存储，这只会给pro增加几个周期cess我略作了进一步的概述。在任何情况下，数组都可以由任何知道如何访问它的人打印到控制台，无论它是如何存储的。请添加
swap\u tile
函数来询问代码。仅供参考，因为您已经在使用jquery，您不需要所有的“onclick”事件内联。您只需执行
$（'.tile'）。在（'click'，function（）{return swap_tile（$（this）.id（））}）；
在js部分中，可以将值保存为js对象数组，类似于
{value:1，show:false}
，函数在其中确定值是否可见。使用三元运算符，每次单击按钮时可以更改
{currentIndex.show？false:true}
的值，并在下一行
{currentIndex.show？currentIndex.value:'}适当地显示或隐藏该值
。请告诉我这是否为您指明了正确的方向。首先，在视图中存储数据不是一个好主意。@yarix敏感信息也是如此，但对于一个简单的游戏来说，它就足够了。不需要将其存储在数据库或.json文件中……您可以利用本地存储，这只会给pro增加几个周期cess我略作了进一步的概述。在任何情况下，数组都可以由任何知道如何访问它的人打印到控制台，无论它是如何存储的。请添加
swap\u tile
函数来询问代码。仅供参考，因为您已经在使用jquery，您不需要所有的“onclick”事件内联。您只需执行
$（'.tile'）。在（'click'，function（）{return swap_tile（$（this.id（））}）；
的js部分，谢谢你@Tiny Giant。我实际上使用Jquery做了一个变体，得到了我想要的结果。谢谢你！谢谢你@Tiny Giant。我实际上做了一个va