-1

私の質問は、チェックボックスをオンにしてフィルタリングするフィルタリングシステムが欲しいということです。このツールは、TV パッケージを比較する比較 Web サイトです。

  1. 私の訪問者は、見たいテレビチャンネルでパッケージをフィルタリングする必要があります.

例;
チェックボックス 1: ディスカバリー
チェックボックス 2: アニマル プラネット
チェックボックス 3: ディズニー チャンネル

出力は一致する TV パッケージ
パッケージ 1: (ディスカバリーとディズニー チャンネルを含む)
パッケージ 2: (アニマル プラネット、ディズニー チャンネルを含む)
パッケージ 3: (アニマル プラネットを含む)

したがって、チェックボックス 1 がチェックされている場合、パッケージ 1 のみが表示 さ
れます。
訪問者の選択と完全に一致するパッケージ 2 を表示します。

あなたが私を助けてくれることを願っています。私はこの特定の解決策の後、成功せずに多くのことを探してきました。

4

2 に答える 2

0

Jqueryに入れるべきだと思います。私はいくつかの類似フィルタリングの例を見てきましたが、上記の私の願いのようなものはありません。

于 2013-03-18T23:04:54.847 に答える
0

これは古い質問ですが... 試してみます。jsfiddle の作業: http://jsfiddle.net/a0nnrfua/

「最も近い」をどのように定義するかに大きく依存すると思いますが、jQueryソリューションを想定し、ブラウザの要件が過去にそれほど遠くないことを願っています.data-属性とjQueryを使用して、比較的いくつかを思いつくことができますシンプルな機能。または、チェックボックスの値の部分を実際に使用することもできます。

擬似コードは次のようになります。

  1. チェックボックスがタッチ/変更されるたびに検出するクリックまたは変更ハンドラーを定義します。
  2. チェックされたすべてのアイテムをスキャンし、値を「最も近いパッケージ」関数に渡す関数を定義します。
  3. その関数の結果に基づいて、パッケージの選択をフィルター処理して、選択内容が何らかの方法で強調表示またはマークされるようにします。

では、次の HTML マークアップを想定してみましょう。

    <h3>TV Channels</h3>

<div id="TVChannelSelections">
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_Discovery" value="Discovery" />
    <label for="tvchannel_Discovery">Discovery Channel</label>
    <br/>
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_AnimalPlanet" value="Animal Planet" />
    <label for="tvchannel_AnimalPlanet">Animal Planet</label>
    <br/>
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_DisneyChannel" value="Disney Channel" />
    <label for="tvchannel_Disney">Disney Channel</label>
    <br/>
</div>

<div id="message"></div>
<h3>Packages</h3>

<div id="FilteredPackages">
    <div class="package deselected" id="Package1" data-channels="Discovery,Disney Channel">Package #1</div>
    <div class="package deselected" id="Package2" data-channels="Animal Planet,Disney Channel">Package #2</div>
    <div class="package deselected" id="Package3" data-channels="Animal Planet">Package #3</div>
</div>

したがって、jQuery では、一般的な変更またはクリック ハンドラーはコードで定義されます。「tvchannel」クラスが定義されているページ上のすべての要素で、変更が発生した場合はフィルター関数を実行します。

<script type="text/javascript" src="../path/to/jQuery/library"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".tvchannel").on("change", function() {
            FilterMySelectedChannels();
        });
    });
</script>

これで、フィルター関数を定義できます。2 つのことを仮定します。＃1、選択したすべてのチェックボックスとその値を見つけたいということ。次に、すべてのパッケージ (class = "package" の要素として定義) の data-channels プロパティを反復処理します。なんらかの形式の文字列比較とブール ロジックを使用して、完全な一致とほぼ一致するが一致しない場合と完全な不一致を定義します。

物事を追跡するために、選択、選択解除、クローズの 3 つのクラスを使用しています。

css では、notselected を「パッケージを完全に非表示にする」(つまり、display: none;) ことを意味するようにするか、または表示するがグレー表示にして「取り消し線を引く」(つまり、text-decoration: 取り消し線; 色) にするかを決定できます。 ： グレー;}

比較を行うには、一種の強引な方法を使用します。JavaScript にはよ​​り優れた配列関数と比較関数がありますが、これはほとんどの人にとって比較的明確なはずです。私は、stackoverflow の優秀な人々がより良い解決策を提供してくれると信じています。しかし、これで始められるはずです。:)

<script type="text/javascript">
    function FilterMySelectedChannels() {
        $checkedboxes = $(".tvchannel:checked");
        $packages = $(".package");
        var bAnyFound = false;
        $packages.each(function () {
            var bCloseButNoCigar = false;
            var bCompleteMatch = true;
            var packagearray = $(this).data("channels").split(",");
            var $currentPackage = $(this);
            $checkedboxes.each(function () {
                if ($.inArray($(this).val(), packagearray) != -1) {
                    bCloseButNoCigar = true;
                } else {
                    bCompleteMatch = false;
                }
            });

            if (bCompleteMatch) {
                $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("selected");
                bAnyFound = true;
            } else if (bCloseButNoCigar) {
                $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("close");
            } else {
                $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("deselected");
            }
        });

        if (bAnyFound) {
            $("#message").html("The following matches were found");
        } else {
            $("#message").html("No actual matches were found, but here are some close matches based on your selections");
            $(".package.close").removeClass("deselected").removeClass("close").removeClass("selected").addClass("selected");
        }
    }
</script>

<style type="text/css">
    .selected {
        color: red;
        background-color: yellow !important;
    }

    .deselected {
        color: grey;
        text-decoration: strike-through !important;
        background-color: white !important;
    }
</style>

おそらくここで機能する可能性のある明らかな最適化がありますが、同様のことをしようとしている人にとっては出発点です. マークアップが動的に生成されるか、適切にコーディングされていることを前提としていることに注意してください。人間のタイプミスを防ぐ必要がある場合は、.toLowerCase/UpperCase を使用してテキストを変換し、.Trim 関数を使用して余分なスペースを削除すると役立ちます。ただし、重複がないように、データ値を賢く選択する必要があります。そして、それらを適切に選択すれば、正規表現やワイルドカード検索などのより優れた手法を使用して、コードを少し短くすることができます。

これが誰かを助けることを願っています!

于 2014-09-15T15:23:42.130 に答える