更改文本和隐藏表格答案

【问题标题】：Changing Text and Hiding a table更改文本和隐藏表格
【发布时间】：2015-10-22 22:06:54
【问题描述】：

我想将 div 用作“链接”，当单击 div 时，它会切换表格的可见性并且 div 的文本会发生变化。我可以让表格在点击时切换，但我无法让 div 中的文本根据表格的可见性进行更改。

这是我的代码：

$(document).ready(function () {
  $('.details td').hide();
  $('#link').click(function () {
    $('.details td').toggle();
    if (('.details td').is(':hidden')) {
      $('#link').text('Click For More Detail');
    } else {
      $('#link').text('Click To Hide Details');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="link" style="Color: blue">Click For More Detail</div>
<div class="details">
  <table class="details">
    <tr>
      <td>details</td>
    </tr>
    <tr>
      <td>more details</td>
    </tr>
  </table>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这里缺少$，

 if (('.details td').is(':hidden')) {
 ////^

您可以通过查看控制台本身来修复它。无论如何，这里是demo。

你也可以像下面这样优化你的代码，

$(document).ready(function () {
    var details = $('.details td').hide();
    $('#link').click(function () {
        details.toggle();
        $(this).text($('.details td').is(':hidden') ? 'Click For More Detail' : 'Click To Hide Details');
    });
});

【讨论】：