javascript - JavaScript ifステートメントで部分一致を確認する

原文 javascript jquery regex filter partial

私は次のような要素を設定しています:

<div class="cat" data-cat="example-cat, test-cat, test-category">
    ...
</div>
<div class="cat" data-cat="test-category">
    ...
</div>
<div class="cat">
    ...
    <div class="cat" data-cat="example-cat, test-category">
        ...
    </div>
    <div class="cat" data-cat="test-category, one-more-cat">
        ...
    </div>
</div>


JavaScriptを使用して、コンマの間のテキストの各ビットをチェックして、ユーザーが選択した値と一致するかどうかを確認する必要があります。たとえば、ユーザーが「test-cat」を選択した場合、各divをチェックして、data-catが選択に一致するかどうかを確認する必要があります。一致する場合は、一致する各class="active"divを追加する必要があります。

トリックの一部は、ユーザーがtest-catを選択した場合、divdata-cattest-categoryが正を返さないようにすることです。完全一致のみが一致と見なされます。



複数のフィルターをサポートする複雑なフィルターシステムを既にセットアップしていましたが、クライアントはdivごとに複数のカテゴリーを設定できることを望んでいるため、これはトリッキーです。属性が完全一致である場合に一致を表示するようにスクリプトを設定しました。これを変更して、必要に応じて機能するようにします。

$(document).ready(function() {
    var changedOnce = false;
    $("#filters select").change(function() {
        $(".cat").each(function() {
            $(this).attr("data-match", "true");
            $(this).removeClass("open");
        });
        $("#filters select").each(function() {
            var filter = $(this).attr("name");
            var value = $(this).val();
            $(".cat").each(function() {
                if ($(this).attr("data-match") === "false") {
                    return true;
                }
                var attr = $(this).attr("data-" + filter);
                var childAttr = $(this).find(".cat").attr("data-" + filter)
                if ((typeof attr !== typeof undefined && attr !== false) || (typeof childAttr !== typeof undefined && childAttr !== false)) {
                    if ($(this).attr("data-" + filter) === value || $(this).find(".cat").attr("data-" + filter) === value || value === "") {
                        $(this).attr("data-match", "true");
                        $(this).parents(".cat").attr("data-match", "true");
                    } else {
                        $(this).attr("data-match", "false");
                        return true;
                    }
                } else {
                    if (value !== "") {
                        $(this).attr("data-match", "false");
                        return true;
                    } else {
                        $(this).attr("data-match", "true");
                        $(this).parents(".cat").attr("data-match", "true");
                    }
                }
            });
        });
    });
});


私のフィルターは次のように設定されています:

<div id="filters">
    <select name="cat">
        <option value="test-cat">Test Cat</option>
        <option value="example-cat">Example Cat</option>
        ...
    </select>
    ...
    <select name="nth-filter">
        ...
    </select>
</div>


これはおそらく最もエレガントなソリューションではありません(私はJavaScriptマスターではありません)が、この最新の変更を加えるまでは機能していました。さらに情報が必要な場合はお知らせください。



更新:提案された.data().split()を使用した私の現在のスクリプトは次のとおりです。すべての子がミスの場合、親カテゴリをミスとして表示するのに問題がありますが、そのために別の質問を投稿します。

$(document).ready(function() {
    $("#filters select").change(function() {
        $(".cat").each(function() {
            $(this).data("match", true);
            $(this).css("opacity", "1");
            // $(this).removeClass("open");
        });
        $("#filters select").each(function() {
            var filter = $(this).attr("name");
            var value = $(this).val();
            $(".cat").not(".primary").each(function() {
                if ($(this).data(filter)) {
                    var match = $(this).data("match");
                    var attributes = $(this).data(filter).split(", ");
                    var i = 0;
                    $(attributes).each(function() {
                        if (value && attributes[i] !== value) {
                            match = false;
                        } else {
                            match = true;
                            return true;
                        }
                        i++;
                    });
                    $(this).data("match", match);
                }
                if ($(this).data("match") === false) {
                    $(this).css("opacity", "0.25");
                } else {
                    $(this).css("opacity", "1");
                }
            });
        });
    });
});
答え
文字列のsplit関数を使用して、コンマ区切りの値を配列に分割し、配列のindexOf関数を使用して一致を確認できます。

var attr = $(this).attr("data-" + filter);

if (attr && (attr.split(/[\s*,\s*]+/).indexOf() >= 0)) {




注:チェックのこの部分は省略しました:attr !== falseattrは文字列または未定義のいずれかである必要があるため、falseになることはありません。それが文字列"false"かどうかを確認するつもりですか?



また、次を呼び出す場合:

var childAttr = $(this).find(".cat").attr("data-" + filter)


.attr()は最初に一致した要素の値を返すことに注意してください。マークアップから、複数の一致した要素が存在する可能性があるように見えます。
関連記事

javascript - 新しいページを読み込むときに、読み込まれたJavaScriptコンテンツをWebViewに保存する方法は?

javascript - 大きなファイルのブラウザをクラッシュさせるUint8Arrayの変換

javascript - $ .postは、$ J = jQuery.noConflict();と組み合わせて機能していません。

javascript - 選択した要素をAjaxライブ検索からテキストボックスにコピーします

javascript - JavaScriptでのオブジェクトを使用した多次元配列の並べ替え

javascript - ラチェットからスライダーを破壊/無効にする方法は?

javascript - ウェブページに最小高さを置く必要がある

javascript - React-RouterとMixinsを使用したサーバー側認証

javascript - EmberはPOSTリクエストのJSON応答を取得します

javascript - jqueryを使用して<body>にhtmlコンテンツを設定する方法