在jQuery上奇怪的过滤失败

Question

最近，我想开发一个简单的表格过滤web应用程序，因为我发现大学课程选择页面无功能并且很难浏览符合特定标准的一些课程。因此，我写了一些代码所需的功能:)

我是新来的JavaScript和这个过滤网页是我第一个包含JavaScript代码的小项目。当然，我在1.8.3版本的过程中使用了JQuery。

我的页面布局如下：

4的过滤器与功能

1. 课程代码 - 选择时，使用AJAX，从原始源表低于过滤器的提取到div（只是一个巨大的元素）。
2. 课程日 - 选中时，不包含该日的行将被隐藏。
3. 课程时长 - 就像2.
4. 主要限制 - 这里是有问题的过滤器。首先让我们看看表结构。

这个屏幕截图是从原始源。现在您已经看到主要限制栏是如何填充的，让我们来谈谈过滤器。

这里是我的网页截图：

第3个选择很好地工作。这是js代码给你一个想法。以下是日期过滤器。

$('#gunler').change(function() { 
    if ($(this).val() != "Seçiniz/Select") { //if an option for gunler (days) is selected 
     $(".dersprg tr").show(); //show all rows first 
     applyFilter(); //apply previously selected filters (hours, major restriction) 
     $(".dersprg tr td:nth-child(6):missing('" + $(this).val() + "')").parent().hide(); //hide row that dont 
     $(".dersprg td:contains('CRN')").parent().show(); //show the header of the table //contain selected 
    } //option 
    else { //if the option is "defaulted" 
     $(".dersprg td").parent().show(); //show all rows 
     applyFilter(); //apply previously selected filters 
     $(".dersprg td:contains('CRN')").parent().show(); //show header of the table 
    } 
}); 

那么，主要限制过滤器有相同的结构，但它产生一些奇怪的输出。例如，当从下拉列表中选择BLGE时，过滤器工作正常。但是，当选择MAT时，即使只有一门课程只为MAT学生开放，过滤器也会隐藏该行。一些BLG课程也是如此。有3-4个课程，主要限制为“BLG”，当我从下拉列表中选择BLG时，其他课程包含其他专业的BLG，但是有些行只有BLG作为主要限制。我加倍检查了一切，我似乎错过了故障点。

奇怪的部分是当我从jsfiddle，工作相同的代码，它工作得很好！ 这是的jsfiddle代码

$.expr[':'].missing = function (elem, index, match) { 
    return (elem.textContent || elem.innerText || Sizzle.getText([elem]) || "").indexOf(match[3]) == -1; 
} 
$(".dersprg tr").show(); 
$(".dersprg tr td:nth-child(12):missing('MAT')").parent().hide(); 
$(".dersprg td:contains('CRN')").parent().show(); 

的HTML代码的原始来源我之前展示你的结果是单行是正确的过滤！

然而，在本地主机上或者网页所期望的代码将不会工作。我使用Google Chrome版本24.0.1312.56米。我也从Mozilla Firefox浏览过滤器，但结果是一样的。

你能告诉我哪里出了问题，我该如何纠正它？ 感谢您的时间&注意:)

一些额外的信息我认为这将是有益的：

我使用了一种叫做applyFilter（）会的功能，这里是它的身体：

function applyFilter() { 
    if ($('#saatler').val() != "Seçiniz/Select") { 
     $(".dersprg tr:missing('" + $('#saatler').val() + "')").hide(); 
    } 
    if ($('#bolumler').val() != "Seçiniz/Select") { 
     $(".dersprg tr:missing('" + $('#bolumler').val() + "')").hide(); 
    } 
    if ($('#gunler').val() != "Seçiniz/Select") { 
     $(".dersprg tr:missing('" + $('#gunler').val() + "')").hide(); 
    } 
} 

这里是如何的主要限制过滤器创建的选项：

<option selected value="Seçiniz/Select">Seçiniz/Select</option> 
    <?php 
    $bolumler = str_getcsv(file_get_contents('bolumler.csv')); 
    foreach ($bolumler as $bolum) 
     echo '<option value="' . $bolum . '">' . $bolum . '</option>'; 
    ?> 
</select> 

和 “bolumler.csv”

BIO，BIOE，BLG，BLGE，CEV，CEVE，CHZ，CHZE，DEN，沙地，DUIK，EHB， EHBE，ELE，ELH，ELK，ELKE的内容，ENDE，EUT，EUTE，FIZ，FIZE，GEM，GEME， ISLE，JDF，JEF，JEFE ，MEE，JEO，KIM，KIME，KMM，KMME，KON，KONE，MAD， PEME，PET，PETE ，SBP，SBPE，TEK，TEKE，TEL，THO，UCK，UCKE，UZB，UZBE

如果您想执行过滤器上的一些操作，下面是链接到我的网页：

http://ilbeyli.fast-page.org/ITUDersProg/

感谢所有的人再次尝试工作的事情了。

Answer 1

原因是在小提琴而不是在你的页面上的作品是Sizzle没有定义在你的网页上（但它是在小提琴中定义的）。您可以单独包含Sizzle.js，或者使用$.find作为jQuery通过$.find公开Sizzle选择器引擎，或者您可以使用更简单的方法获取文本以与:missing选择器（如下面的$(elem).text()）进行比较。

$.extend($.expr[':'], { 
    "missing": function (elem, index, match) { 
     var text = $(elem).text(), 
      test = new RegExp('\\b' + match[3] + '\\b'); // test on word boundaries 
     return !text.match(test); 
    } 
}); 

我冒昧地改变了使用字边界的比较，因为它会区分包含子字符串的单元格。

举个例子，如果我试图找到失踪FIZ您当前:missing选择包含FIZ和FIZE细胞之间将无法区分小区（如FIZE包含FIZ）。通过更改选择器来查找单词边界之间的标记，这不再是问题。

我也花了一些自由来重构你的代码，并切换到jQuery AJAX，而不是你自定义的AJAX例程（因为它看起来更简单）。

使用控制台，我能得到预期的Chrome（版本24.0.1312.57米）以下的代码工作：

//Gun Saat ve Bolum Filtreleri 
$(document).ready(function() { 
    'use strict'; 
    var fetchPage = function fetchPage(fb) { 
     var t = $('#table'); 
     if (!fb) { 
      t.empty(); 
     } else { 
      $.ajax({ 
       "url": "http://ilbeyli.fast-page.org/ITUDersProg/fetch.php", 
       "data": { 
        "url": "http://www.sis.itu.edu.tr/tr/ders_programlari/LSprogramlar/prg.php?fb=" + fb 
       }, 
       "success": function (data, textStatus, jqXHR) { 
        t.html(data); 
       } 
      }); 
     } 
     $('#saatler, #gunler, #bolumler').val('Seçiniz/Select'); 
    }, changeHandler = function changeHandler(e) { 
     var self = $(this), 
      dersprg = $('.dersprg'), 
      gun = $('#gunler').val() !== 'Seçiniz/Select' ? $('#gunler').val().trim() : '', 
      saat = $('#saatler').val() !== 'Seçiniz/Select' ? $('#saatler').val().trim() : '', 
      bolum = $('#bolumler').val() !== 'Seçiniz/Select' ? $('#bolumler').val().trim() : '', 
      gunRows = $(".dersprg tbody tr td:nth-child(6)").filter(":missing('" + gun + "')").parents('tr'), 
      saatRows = $(".dersprg tbody tr td:nth-child(7)").filter(":missing('" + saat + "')").parents('tr'), 
      bolumRows = $(".dersprg tbody tr td:nth-child(12)").filter(":missing('" + bolum + "')").parents('tr'); 
     dersprg.find('tbody tr').show(); // show all rows 
     if (gun) { 
      gunRows.hide();  // hide rows that do not contain `gun` 
     } 
     if (saat) { 
      saatRows.hide(); // hide rows that do not contain `saat` 
     } 
     if (bolum) { 
      bolumRows.hide(); // hide rows that do not contain `bolum` 
     } 
     // show the header rows 
     dersprg.find('td:contains("CRN")').parents('tr').show(); 
    }; 
    $('#derskodu').change(function (e) { 
     var val = $(this).val(); 
     fetchPage(val); 
    }); 
    $.extend($.expr[':'], { 
     "missing": function (elem, index, match) { 
      var text = $(elem).text(), 
       test = new RegExp('\\b' + match[3] + '\\b'); // test on word boundaries 
      return !text.match(test); 
     } 
    }); 
    $('#gunler, #saatler, #bolumler').change(changeHandler); 
});