javascript - 检查 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 的 data-cat 为 test -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");
                }
            });
        });
    });
});

Answer 1

您可以使用字符串的 split 函数将逗号分隔的值拆分为数组，然后使用数组的 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() 将返回第一个匹配元素的值，并且从您的标记看来可能有多个匹配元素。