javascript - 用户生成的过滤器和内容，我怎样才能写得更好

Question

我正在编写一个(多)过滤器，它是在用户通过 wordpress 输入数据时创建的。可以有 2 - 10 个过滤器，所以我需要它尽可能动态。我的第一种方法是为每个可能创建的过滤器写出一个 bool 值并检查它是否存在。 bool 值内部是一个点击函数，用于检查数据是否==="是"，然后向该项目添加一个事件类。我重写了一段时间，但我不确定这是最好的方法还是两者都不好。

我不是在寻找完整的答案或工作示例，而是我的方法是否有意义？如果是，为什么？如果不是，为什么不呢？并解释我如何改进它或以不同的方式思考它。

手动检查

var mem = $(".member");

var filter1 = $(".filter-1");
var filter2 = $(".filter-2");
var filter3 = $(".filter-3");

var memCom1 = $(".member").data("com-1");
var memCom2 = $(".member").data("com-2");
var memCom3 = $(".member").data("com-3");

//  DO THIS FOR ALL POSSIBLE

if (memCom1.length > 0 || filter1.length > 0) {
    filter1.click(function() {
        var com1 = $(this).data("com-1");
        if(com1 === "yes") {
            $(this).addClass(active);
        }
    });
}

if (memCom2.length > 0 || filter2.length > 0) {
    filter2.click(function() {
        var com2 = $(this).data("com-2");
        if(com2 === "yes") {
            $(this).addClass(active);
        }
    });
}

if (memCom3.length > 0 || filter3.length > 0) {
    filter3.click(function() {
        var com3 = $(this).data("com-3");
        if(com3 === "yes") {
            $(this).addClass(active);
        }
    });
}

// would go up to 10

一边做

var mem = $(".member");
var active = "is-active"

do {
    var i = 1;
    if ( $(".member").data("com-"+i).length > 0 || $(".filter"+i).length > 0 ) {
        $(".filter-"+i).click(function() {
            if( $(this).data("com-"+i) === "yes" ) {
                $(this).addClass(active);
            }
        });
    }
  i++;
}

while (i <= mem.length);

Answer 1

在您的情况下，使用 $.each() 而不是 do-while 将具有更清晰的代码。另外，我认为具有相同的属性“com”会比“com-#”更简单。对于此类问题，发布一个 jsfiddle 很有帮助。