Question

我有一张桌子，上面有很多句子，它们是单元格中的数据。我给出了以下示例，其中必须单击鼠标才能看到标签<td>中的所有数据，但是现在每次单击时我都隐藏了数据，无法将其取回。

请在我的代码中找到错误，以便在第一次单击鼠标时它会显示所有数据，而在第二次鼠标上它会再次将其隐藏。

$(document).ready(function() {
  $("td").click(function() {
    $(this).toggleClass("hidden");
  });
});

.main {
  font-size: 120%;
  color: red;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

这里是代码https://www.w3schools.com/code/tryit.asp?filename=FUWHD8EBKK6Y

的链接

Answer 1

它应该工作，检查；）

$(document).ready(function() {
  $("td").each(function(i, obj) { 
     $(this).toggleClass("hidden");
     $(this).on("click", function(){
        $("td").toggleClass("hidden");
     });
  });
});

.main {
  font-size: 120%;
  color: red;
}

.hidden {
  opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

如果您只想隐藏表格中的一个单元格，请像这样更改内部选择器

     $("td").each(function(i, obj) {
         $(this).on("click", function(){
            $(this).toggleClass("hidden");
         });
      });

最好在html中添加“隐藏”类。您可以从js删除它

$(this).toggleClass("hidden");

并将“隐藏”类添加到td元素中。

Answer 2

问题是因为您是在td本身而不是在子span上更改类。

要解决此问题，请改用find()和toggle()，如下所示：

$(document).ready(function() {
  $("td").click(function() {
    $(this).find('.hidden').toggle();
  });
});

.main {
  font-size: 120%;
  color: red;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

Answer 3

如我的评论所述，您可以使用.toggle();而不是使用hide类。 .toggle();已经用作显示/隐藏功能。然后，您可以使用.find();隐藏某些元素，而不是隐藏整个元素，这就是您在评论后遇到的问题。您有一个带有类的 span元素。您只需在各自的td元素中选择类，然后对此进行切换。

示例：

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

        <script>
            $(document).ready(function(){
                $("td").click(function(){
                    $(this).find('.hidden').toggle();
                });
            });
        </script>
        <style>
            .main {
                font-size: 120%;
                color: red;
            }

            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill blah blah blah blah  <span class="hidden"> hidden information jfkajfksdlf </span></td>
                <td>Smith</td> 
                <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td> 
                <td>94</td>
            </tr>
        </table>
    </body>
</html>

隐藏和显示HTML表中的内容

3 个答案: