更改文本和隐藏表格

Question

我想使用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>

Answer 1

在$这里错过了

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

您可以通过查看控制台本身来修复它.无论如何这里是一个演示.

您也可以像下面那样优化代码,

$(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');
    });
});