用户生成的过滤器和内容，我如何写得更好

Question

我正在编写一个(多)过滤器，它是在用户通过wordpress输入数据时创建的。有可以在2-10过滤器之间的任何地方，所以我需要这是尽可能的动态。我的第一种方法是为正在创建的每个可能的过滤器写出一个布尔值，并检查它是否存在。布尔值内部是一个单击函数，它检查data===是否为“是”，然后将一个活动类添加到项中。我在一段时间内重写了它，但不确定这是最好的方法还是两者都是坏的。

我不是在寻找一个完整的答案或工作示例，而是我的方式是否有意义？如果是的话，为什么？若否，原因为何？并解释了我怎样才能改进它，或者以另一种方式思考它。

手动检查

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-#”更简单。对于像这样的问题，贴一个小提琴是很有帮助的。

Answer 2

在不了解有关应用程序的更多细节的情况下，使用do-while的第二种方法看起来更好，因为它使用的代码更少，维护/扩展也更容易。但是，看起来您可以在if条件下重用'mem‘变量。