单击时将平方数更改为文本“已选择”，再次单击时将其更改为数字答案

【问题标题】：Changing square number into text "Chosen" when clicking and back to number when clicking again单击时将平方数更改为文本“已选择”，再次单击时将其更改为数字
【发布时间】：2018-09-23 20:17:36
【问题描述】：

我有包含数字的网格/纵横交错。当我单击正方形时，正方形中的数字应变为文本“已选择”。当我再次单击另一个方块时，文本应该变回原来的数字。我怎样才能把它变回原来的数字？

我应该使用 jQuery。这是我的代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title></title>
    <script>
        $(document).ready(function () {
            $("td").click(function () {
                $("td").text("Chosen");
            });
        });
    </script>

    <style>
        table, th, td {
            border: 1px solid black;
            background-color: deeppink;
            font-size: 15px;
        }

     
    </style>
</head>
<body>
    <table style="font-size:20px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <script src="js/main.js"></script>
</body>
</html>

【问题讨论】：

标签： jquery text numbers

【解决方案1】：

无需替换其内容，只需对其应用一个类，使其显示所需的文本。这样一来，您就不必担心将值存储在某个地方以便在您想要恢复它时使用。

$(function() {
  $("td").click(function() {
    // remove .chosen class from all tds
    $('td').removeClass("chosen")
    // add it to clicked one
    $(this).addClass("chosen");
  });
});

不显示元素内容并将其替换为一些文本的最简单方法是：

element {
  visibility: hidden;
}
element:before {
  visibility: visible;
  contents: 'The replacement content'
}

但问题是:before 和:after 不能很好地处理表格元素，所以我们需要一个小脚本来抓取每个td 的内容，并在页面加载时将它们包装在<span> 中，所以我们可以将上述方法应用于<span>元素：

$("td").each(function(){
  $(this).html($('<span />', {
    html: $(this).html()
  }))
})

让我们看看它是否有效：

$(function() {
  $("td").click(function() {
    $('td').removeClass("chosen")
    $(this).addClass("chosen");
  }).each(function() {
    $(this).html($('<span />', {
      html: $(this).html()
    }))
  })
});

table,th,td {
  border: 1px solid black;
  background-color: deeppink;
  font-size: 15px;
}

td {
  width: 100px;
  padding: 1rem;
  text-align: center;
}

.chosen span {
  visibility: hidden;
}

.chosen span:before {
  visibility: visible;
  content: 'Chosen'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="font-size:20px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

【讨论】：