javascript - 更改文本和隐藏表格

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')) {
 ////^

您可以通过查看控制台本身来修复它。无论如何这是一个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');
    });
});