javascript - 使用 CLASS 和 Javascript 进行过滤

Question

我正在尝试在表格上创建一个过滤器，但它根本不起作用。

这就是我到目前为止所拥有的。

这必须全部在同一页面上运行，没有外部内容(如果可能的话)

这是我的 Javascript 部分:

<script type="text/javascript">

 $(document).load(function () {
   $('#SoortFilter').change(function () {
     $(".all-sc").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

  $(document).load(function () {
   $('#OnderwerpFilter').change(function () {
     $(".all-oc").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

  $(document).load(function () {
   $('#GraadFilter').change(function () {
     $(".all-gc").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

</script>

这是我的 HTML 部分:

<div class="myTable">

<table><tr>

<td>Sorteer op soort:<br><select size="1" id="SoortFilter">
<option id="all-sc">Alles tonen</option>
<option id="SC1">Opwarming</option>
<option id="SC2">Oefening</option>
<option id="SC4">Andere</option>
</select></td>

<td>Sorteer op onderwerp:<br><select size="1" id="OnderwerpFilter">
<option id="all-oc">Alles tonen</option>
<option id="OC11">Voetenwerk algemeen</option>
<option id="OC21">Tactiek dubbel</option>
<option id="OC23">Wedstrijd analyse</option>
</select></td>

<td>Sorteer op graad:<br><select size="1" id="GraadFilter">
<option id="all-gc">Alles tonen</option>
<option id="GC2">Gemakkelijk</option>
<option id="GC3">Gemiddeld</option>
<option id="GC4">Moeilijk</option>
<option id="GC6">Variabel</option>
</select></td>

</tr></table>

</div>


<div class="myTable"><table id="myTable">

         <tr>
         <td>ID</td>
         <td><img src="check.png" width="20" height="20"><img src="wait.png" width="20" height="20"></td>
         <td>Soort</td>
         <td>Onderwerp</td>
         <td>Graad</td>
         <td>Benaming</td>
         <td>URL</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC1 OC11 GC6">
         <td>4</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Opwarming</td>
         <td>Voetenwerk algemeen</td>
         <td>Variabel</td>
         <td>Agility oefeningen</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=67XP-AekUoA>https://www.youtube.com/watch?v=67XP-AekUoA</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC2">
         <td>8</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemakkelijk</td>
         <td>Splitstep - fundamentals - Kyo groen</td>
         <td><a target="_blank"  href=https://drive.google.com/file/d/0B0NYVs9pQgGSZzhCQXg3dnFfYUE/edit?pref=2&pli=1>https://drive.google.com/file/d/0B0NYVs9pQgGSZzhCQXg3dnFfYUE/edit?pref=2&pli=1</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC3">
         <td>11</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemiddeld</td>
         <td>Vertrek vanuit de basis</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=WNgt6P_RDLc>https://www.youtube.com/watch?v=WNgt6P_RDLc</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC21 GC4">
         <td>23</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Tactiek dubbel</td>
         <td>Moeilijk</td>
         <td>Lee Bok - Positiespel dubbel</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=XMYbU08AOaw&feature=youtu.be>https://www.youtube.com/watch?v=XMYbU08AOaw&feature=youtu.be</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>14</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren dubbel - halve finale</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=uKj4S9ig7c8>https://www.youtube.com/watch?v=uKj4S9ig7c8</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>15</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren enkel - finale</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=ytjD4f_I0sc>https://www.youtube.com/watch?v=ytjD4f_I0sc</td>
         </tr>


</table></div>

</div>

Answer 1

选中此选项:

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>



<div class="myTable">

<table><tr>

<td>Sorteer op soort:<br><select size="1" id="SoortFilter">
<option id="all-sc">Alles tonen</option>
<option id="SC1">Opwarming</option>
<option id="SC2">Oefening</option>
<option id="SC4">Andere</option>
</select>
</td>

<td>Sorteer op onderwerp:<br><select size="1" id="OnderwerpFilter">
<option id="all-oc">Alles tonen</option>
<option id="OC11">Voetenwerk algemeen</option>
<option id="OC21">Tactiek dubbel</option>
<option id="OC23">Wedstrijd analyse</option>
</select>
</td>

<td>Sorteer op graad:<br><select size="1" id="GraadFilter">
<option id="all-gc">Alles tonen</option>
<option id="GC2">Gemakkelijk</option>
<option id="GC3">Gemiddeld</option>
<option id="GC4">Moeilijk</option>
<option id="GC6">Variabel</option>
</select>
</td>

</tr>
</table>

</div>


<div class="myTable">
<table id="myTable">

         <tr id="thead">
         <td>ID</td>
         <td><img src="check.png" width="20" height="20"><img src="wait.png" width="20" height="20"></td>
         <td>Soort</td>
         <td>Onderwerp</td>
         <td>Graad</td>
         <td>Benaming</td>
         <td>URL</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC1 OC11 GC6">
         <td>4</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Opwarming</td>
         <td>Voetenwerk algemeen</td>
         <td>Variabel</td>
         <td>Agility oefeningen</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC2">
         <td>8</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemakkelijk</td>
         <td>Splitstep - fundamentals - Kyo groen</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC3">
         <td>11</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemiddeld</td>
         <td>Vertrek vanuit de basis</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC21 GC4">
         <td>23</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Tactiek dubbel</td>
         <td>Moeilijk</td>
         <td>Lee Bok - Positiespel dubbel</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>14</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren dubbel - halve finale</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>15</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren enkel - finale</td>
         <td></td>
         </tr>


</table></div>


<body>
</html>

和 JavaScript

<script type="text/javascript">
$(document).ready(function () {
   $('#SoortFilter').change(function () {
     //$(".all-sc").hide();
     filter();
     //$("." + $(this).find(":selected").attr("id")).show();
   });

   $('#GraadFilter').change(function () {
     filter();
     //$(".all-gc").hide();
     //$("." + $(this).find(":selected").attr("id")).show();
   });

   $('#OnderwerpFilter').change(function () {
     filter();
     //$(".all-oc").hide();
     //$("." + $(this).find(":selected").attr("id")).show();
   });

 });

 function filter () {
        one = $("#SoortFilter").find(":selected").attr("id");
    two = $("#OnderwerpFilter").find(":selected").attr("id");
    three = $("#GraadFilter").find(":selected").attr("id");
    filt = "."+one+"."+two+"."+three;
    $("#myTable tr").hide();
    $(filt).show();
    $("#thead").show(); 
    alert(filt);
 }
</script>

在链接https://jsfiddle.net/Cuchu/kbkkg4mc/中测试

OP 的代码在 html 结构中存在错误，由于标签未正确关闭 attr href，因此 html 代码已损坏。jQuery 不包括在内。他们按类过滤了 javascript 函数。在该解决方案中，过滤器适用于所有类(选择)并显示所有重合。