Question

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

我不是在寻找一个完整的答案或有效的例子，而是我的方式是否合理？如果是这样的话？如果没有，为什么不呢？并解释我如何能够改进它或以不同的方式思考它。

手动检查

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

DO WHILE

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。

Answer 2

在不了解有关您应用的更多详细信息的情况下，使用do-while的第二种方法看起来更为可取，因为它使用的代码更少，更易于维护/扩展。但是，看起来您可以重复使用“mem＆＃39; mem if条件中的变量。

用户生成的过滤器和内容，我怎么能更好地写这个

2 个答案: