在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); 
});