0

最近、大学のコース選択ページが機能せず、特定の基準を満たすいくつかのコースを参照するのが難しいため、単純なテーブル フィルタリング Web アプリケーションを開発したいと考えました。したがって、必要な機能のコードをいくつか書きました:)

私は JavaScript を初めて使用します。このフィルタリング Web ページは、JavaScript コードを含む最初の小さなプロジェクトです。もちろん、このプロセスではバージョン 1.8.3 の JQuery を使用しました。

私のページレイアウトは次のとおりです。

機能を備えた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 を選択すると、フィルターは正常に機能します。ただし、MAT を選択すると、MAT の学生だけに開かれるコースが 1 つあるにもかかわらず、フィルターによってその行も非表示になります。一部の BLG コースについても同様です。主要な制限が「BLG」だけのコースが 3 ～ 4 コースあり、ドロップダウンから 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 または Web ページでは、コードが期待どおりに機能しません。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、KONE、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例として、現在のセレクターがないセルを見つけようとしている場合、 ( containsとして)と:missingを含むセルを区別しません。単語境界間のトークンを見つけるようにセレクターを変更することで、これはもはや問題ではありません。FIZFIZEFIZEFIZ

また、コードをリファクタリングし、カスタム AJAX ルーチンの代わりに jQuery 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 に答える