检查 JavaScript if 语句中的部分匹配

Question

我已经将元素设置成这样：

<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，div 和 test-category 的 data-cat 不应该 return 为正数。只有完全匹配才应考虑匹配。

我已经设置了一个支持多个过滤器的复杂过滤系统，但客户希望能够为每个 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()。如果父类别的所有子类别都未命中，我无法让父类别显示为未命中，但我会 post 对此提出一个单独的问题。

$(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");
                }
            });
        });
    });
});

Answer 1

您可以使用 String 的 split 函数将以逗号分隔的值拆分为一个数组，然后使用 Array 的 indexOf 函数来检查是否匹配。

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

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

注意：我遗漏了这部分支票：attr !== false。 attr 应该是字符串或未定义，所以它永远不会是 false。您是要检查它是否是字符串 "false"?

此外，当您调用以下内容时：

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

您应该知道 .attr() 将 return 第一个匹配元素的值，从您的标记看来可能有多个匹配元素。

检查 JavaScript if 语句中的部分匹配

Check for partial match in JavaScript if statement

javascript

regex

jquery

filter

partial