当我试图隐藏所有行时，我的 jquery 函数仅隐藏在表行中？答案

【问题标题】：My jquery function is only hidding in table row while i am trying to hide all rows?当我试图隐藏所有行时，我的 jquery 函数仅隐藏在表行中？
【发布时间】：2020-03-03 09:39:06
【问题描述】：

这个函数是淡入淡出的，但只适用于id为“AsserRow”的一行

为什么它不适用于所有行？

$('#chkTribe').change(function() {
  if (!this.checked) {
    $('#AsserRow').fadeIn('slow');
    $('#FoneRow').fadeIn('slow');
    $('#FtRow').fadeIn('slow');
  } else {
    $('#AsserRow').fadeOut('slow');
    $('#FoneRow').fadeIn('slow');
    $('#FtRow').fadeIn('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
</table>

【问题讨论】：

使用类是个好主意
@Rory id 是唯一的，但您也可以在运行代码 sn-p 中检查它唯一的褪色
抱歉，我误读了这个问题。我以为你的意思是它只适用于更大表中的这三个重复行
您只需要在它们上调用fadeIn() 并且它们已经可见，因此似乎什么都没有发生。
@Rory 我很抱歉。我应该在哪里敲我的头大声笑

标签： jquery html checkbox

【解决方案1】：

你在 else 中淡入了太多次

这个比较简单

$('#chkTribe').change(function() {
  if (this.checked) {
    $("[id$=Row]").fadeOut('slow'); // Alas no fadeToggle(boolean)
  } else {
    $("[id$=Row]").fadeIn('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

你可以只用 CSS 来做到这一点（如果布局与你共享的布局大致相同，这意味着复选框和表格是同级的，表格在复选框之后）

/* add common class to all rows you want to hide
for eg : hide-me */
/* or you could select all the rows that have id's that contain `Row` word
with #chkTribe:checked ~ table tr[id$=Row] */

#chkTribe:checked ~ table .hide-me {
  opacity:0;
  line-height: 0px;
}


table .hide-me {
  transition:0.3s ease-out;
  line-height: 20px;
}

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr class="hide-me" id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr class="hide-me"  id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr class="hide-me"  id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
  <tr>  <td>
      <span style="font-weight:bold">Other row here</span>
    </td>
  </tr>
</table>

【讨论】：