Question

在这个website上（使用Wordpress构建）我有一个内容表，顶部有一些复选框过滤器，允许用户按价格，房间等过滤表格。

以下与复选框相关的JS脚本不再正常工作。（我只发布一小部分，因为不同的复选框是相同的。）

<script>

$(document.body).on('change', "#checkboxID", function() { 
$("#tableID tr.rowEG").toggle(!this.checked); 
});

$(document.body).on('change', "#checkbox1OG", function() { 
$("#tableID tr.row1OG").toggle(!this.checked); 
});

$(document.body).on('change', "#checkbox2OG", function() { 
$("#tableID tr.row2OG").toggle(!this.checked); 
});

$(document.body).on('change', "#checkbox3OG", function() { 
$("#tableID tr.row3OG").toggle(!this.checked); 
});

</script>

这是与内容表相关的HTML的一部分：

<div class="tabelle" id="wrap">
 <table class="table" id="tableID">
  <thead>
   <tr>
    <th>Wohnung
    Apartment</th>
    <th>Zimmer
     Rooms</th>
    <th>Stockwerk
    Floor</th>
    <th>Haus Nr.
    House No.</th>
   <th>Nettomiete
    Net Rent</th>
    <th>Bruttomiete
    Gross Rent</th>
    <th>PDF</th>
    </tr>
  </thead>
 <tbody>
   <tr class="row1 row1OG row2OG row3OG zimmer3 zimmer2 zimmer5 range1 
range2 range3 range5 haus2 haus3 haus4 haus5 haus6 haus7 haus8 haus9 haus10 
haus11 haus12 haus14 special1">
   <td>1.0.1</td>
   <td>4.5</td>
   <td>EG</td>
   <td>1</td>
   <td>2120</td>
   <td><span style="color: #ff0000;">vermietet</span></td>
   <td><a target="_blank" href="/table/pdf/Haus_1/1.0.1.pdf" rel="noopener 
noreferrer"><img alt="" src="/img/pdf.png" /></a></td>
   </tr>
</tbody>
</table>
</div>

有关如何修复它的任何建议吗？

非常感谢你的帮助

Answer 1

首先你的js中有一些错误 - 你不再有一个名为wrap的div，这导致你的js在这里失败 - https://i.imgur.com/eJMPBz1.png

您的更改侦听器中的代码工作正常 - 我相信他们只是没有注册。尝试将其更改为：

$("#checkbox2OG").change(function() {
    $("#tableID tr.row2OG").toggle(!this.checked); 
});

JS：勾选复选框隐藏/显示表格行

1 个答案: