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的{{1}}不应返回正数。只有完全匹配才应考虑匹配。

我已经建立了一个支持多个过滤器的复杂过滤系统，但客户希望能够为每个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

您可以使用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()将返回第一个匹配元素的值，并且从您的标记看起来可能有多个匹配元素。

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

1 个答案: