0

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

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

我的页面布局如下：

4个过滤器的功能

  1. 课程代码 - 选择时，使用 AJAX 将原始源中的表格提取到过滤器 div 的下方（只是一个巨大的<table>元素）。
  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 时，过滤器工作正常。However when MAT is chosen, even though there is one course that is opened just for MAT students, the filter hides that row as well. 一些 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 代码是我之前向您展示的原始源代码，结果是正确过滤的单行！

jsfiddle

但是，在 localhost 或网页上，代码无法按预期工作。我正在使用 Google Chrome 版本 24.0.1312.56 m。我也检查了 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，DENE，DUIK，EHB，EHBE，ELE，ELH，ELK，ELKE，END，ENDE，EUT，EUTE，FIZ，FIZE，GEM，GEME， GEMK，GEO，GEOE，GID，GIDE，GMIK，ICM，IML，IMLE，INS，INSE，ISL，ISLE，JDF，JEF，JEFE，JEO，JEOE，KIM，KIME，KMM，KMME，KON，通力，MAD， MADE、MAK、MAKE、MAT、MATE、MET、METE、MIM、MIME、MTO、MTOE、PEM、PEME、PET、PETE、SBP、SBPE、TEK、TEKE、TEL、THO、UCK、UCKE、UZB、UZBE

4

1 回答 1

1

原因是在小提琴中而不是在您的页面上有效，因为Sizzle它没有在您的页面上定义（但它在小提琴中定义）。您可以Sizzle.js单独包含，或者使用$.findjQuery 通过 公开 Sizzle 选择器引擎$.find，或者您可以使用更简单的方法来获取文本以比较您的: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（作为FIZEcontains FIZ）的单元格。通过更改选择器来查找单词边界之间的标记，这不再是问题。

在重构您的代码并切换到 jQuery AJAX 而不是您的自定义 AJAX 例程（因为它看起来更简单）时，我还采取了一点自由。

使用控制台，我能够让以下代码在 Chrome（版本 24.0.1312.57 m）中按预期工作：

//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);
});
于 2013-02-02T21:48:39.837 回答