Question

我有一个包含数字的网格/十字形。当我单击正方形时，正方形中的数字应更改为文本“选择”。当我再次单击另一个正方形时，文本应转回原来的数字。我该如何将其恢复为原来的数字？

我应该使用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>

Answer 1

代替替换其内容，只需对它应用一个类，使其显示所需的文本。这样，您无需担心要将值存储在某处的情况。

TensorArray

不显示元素内容并用某些文本替换的最简单方法是：

$(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的内容并将它们包装在{{ 1}}，当页面加载时，我们可以将以上方法应用于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()
    }))
  })
});

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

1 个答案: