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

【问题标题】：Hide the text of a button without changing the text using Jquery隐藏按钮的文本而不使用 Jquery 更改文本
【发布时间】：2016-01-27 09:08:00
【问题描述】：

我正在使用 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;
}

【问题讨论】：

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

标签： javascript jquery html html-input

【解决方案1】：

要隐藏文本，请使用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)' : '';
}

&lt;button id="demo"&gt;This will disappear&lt;/button&gt;

如果你喜欢 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>

【讨论】：

谢谢@Tiny Giant。我实际上使用 Jquery 做了一个变体并得到了我想要的结果。谢谢！

【解决方案2】：

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

    $(document).ready(function (){

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

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

      });
    });

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

  button {
  color: white;
}

【讨论】：

【解决方案3】：

将号码存储在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
});

【讨论】：

【解决方案4】：

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

即

input{
   background-color: blue;
}

并使用

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

【讨论】：

【解决方案5】：

改用按钮：

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

隐藏按钮内的跨度：

$("#b33 span).hide();

【讨论】：