Question

有人可以请指出如何缩短此代码的方向吗？

if($(".row-member0").is(":visible")){
    if($("#TeamMember_0_name").val()==="") i=false;
    if($("#TeamMember_0_email").val()==="") i=false;
    if($("#TeamMember_0_phone").val()==="")i=false;
    if($("#TeamMember_0_birthdate").val()==="") i=false;
    if( !validateEmail($("#TeamMember_0_email").val())) { 
        i=false;
    }    
}

if($(".row-member1").is(":visible")) {
    if($("#TeamMember_1_name").val()==="") i=false;
    if($("#TeamMember_1_email").val()==="") i=false;
    if($("#TeamMember_1_phone").val()==="") i=false;
    if($("#TeamMember_1_birthdate").val()==="") i=false;
    if( !validateEmail($("#TeamMember_1_email").val())) { 
            i=false;
    }
}

if($(".row-member2").is(":visible")) {
    if($("#TeamMember_2_name").val()==="") i=false;
    if($("#TeamMember_2_email").val()==="") i=false;
    if($("#TeamMember_2_phone").val()==="") i=false;
    if($("#TeamMember_2_birthdate").val()==="") i=false;
    if( !validateEmail($("#TeamMember_2_email").val())) { 
        i=false;
    }
}

我知道也许应该使用互动。只是不确定如何。

我虽然关于：

1）将.row-member类放在顶部元素上，然后：

$('.row-member input').each(
    function(index, value) {
        if($(this).val()==="") i=false; 
    }
);

我可以帮忙吗？

Answer 1

您可以使用StartsWith选择器和each()来迭代您的课程：

$("[class^='row-member']").each(function(index) {
    if($("#TeamMember_" + index + "_name").val()==="" || $("#TeamMember_" + index + "_email").val()==="" || $("#TeamMember_" + index + "_phone").val()==="" || $("#TeamMember_" + index + "_birthdate").val()==="" ||  !validateEmail($("#TeamMember_" + index + "_email").val())) { 
        i=false;
    } 
});

Answer 2

我建议使用公共类而不是唯一类。这就是ID的用途。

如果你这样做，那么它可以缩短为：

i = $(".row-member:visible input").toArray()
                                  .every(function(el) {
                                       return el.value !== "";
                                   });

您需要.every()的补丁。

如果您不想修补.every()，那么您可以像这样使用jQuery来实现：

$(".row-member:visible input").each(function(_, el) {
                                        if (el.value === "") {
                                            i = false;
                                            return false; // to short circuit 
                                        }
                                    });

或者，假设i从true开始，您可以这样做：

$(".row-member:visible input").each(function(_, el) {
                                        return i = (el.value !== "");
                                    });

所有这三种技术都提供了短路，因此您无需在找到第一个空值后继续测试值。

Answer 3

if($(".row-member0").is(":visible")){
    if($("#TeamMember_0_name").val()==="" || $("#TeamMember_0_email").val()==="" || $("#TeamMember_0_phone").val()==="" || $("#TeamMember_0_birthdate").val()==="" ||  !validateEmail($("#TeamMember_0_email").val())) { 
        i=false;
    }    
}

为休息做同样的事情

Javascript新手 - 处理DRY问题

3 个答案: