javascript - JQuery if-else 跳过第一个有效条件后的所有内容

Question

好吧，这个问题让我困惑了一段时间。

我有 3 个命名输入框和 3 个相应命名的隐藏变量(无形式)。

<table border=0 cellpadding="0" cellspacing="0">
    <tr><td>COMPANY NAME: </td><td><input id="company_name_input" name="company_name_input"></td></tr>
    <tr><td>BUSINESS TYPE: </td><td><input id="business_type_input" name="business_type_input"></td></tr>
    <tr><td>LOCATION: </td><td><input id="location_input" name="location_input"></td></tr>
    <tr><td colspan=2 align=center><input type=button class='personalize_content button_orange' value="Personalize Content"></td></tr>
</table>

单击按钮(“个性化内容”)时，我使用 jQuery 来测试 3 个输入框是否有值，如果有值，则更新相应的隐藏变量。我试图在 jQuery 中使用三个 if/else block 来实现这一点。

$(".personalize_content").on('click',function(){
    str = $("#target_content_hidden").val();
    if($.trim($("#company_name_input").val()).length == 0 ){
        /* Adds a quick flashing effect on the input box and it will fade out. Nothing else is done here */
        $("#company_name_input").animate({borderColor: "#ff0000"}, 500);
        $("#company_name_input").animate({borderColor: "#ccc"}, 4500);
    }else{
        /* This section finds-and-replaces a block of text in another hidden field (code not shown here), and also updates the corresponding hidden variable */
        var change_text = new RegExp($('#company_name_value').val(),'gi');
        $("#target_content_hidden").val(str.replace(change_text, $("#company_name_input").val()));
        $("#company_name_value").val($("#company_name_input").val());
    }
    /* Two more if-else blocks doing the same things above, for the other two input boxes */
    if($.trim($("#business_type_input").val()).length == 0 ){
        $("#business_type_input").animate({borderColor: "#ff0000"}, 500);
        $("#business_type_input").animate({borderColor: "#ccc"}, 4500);
    }else{
        var change_text = new RegExp($('#business_type_value').val(),'gi');
        $("#target_content_hidden").val(str.replace(change_text, $("#business_type_input").val()));
        $("#business_type_value").val($("#business_type_input").val());
    }

    if($.trim($("#location_input").val()).length == 0 ){
        $("#location_input").animate({borderColor: "#ff0000"}, 500);
        $("#location_input").animate({borderColor: "#ccc"}, 4500);
    }else{
        var change_text = new RegExp($('#location_value').val(),'gi');
        $("#target_content_hidden").val(str.replace(change_text, $("#location_input").val()));
        $("#location_value").val($("#location_input").val());
    }           
});

现在，当我按下按钮运行它时，所有“if”条件都起作用 - 即它检查输入框是否为空，并闪烁所有 3 个输入框。但是，如果我向其中一个输入框添加值，则仅执行“else” block ，而跳过其他两个 block 。如果我再更新一个框，则只会执行新的 else block ，而不会执行其他 block 。

到目前为止我所尝试的 - 除了在 Google 和 SO 中搜索类似的答案两天并检查许多类似的答案之外，我已将 if/else block 移动到一个单独的函数中，并尝试将框名称传递为函数的参数，但这也不起作用。 (代码看起来像这样 -

$(".personalize_content").on('click',function(){        
    validateParamBox($("#company_name_input"), $("#company_name_value"));
    validateParamBox($("#business_type_input"), $("#business_type_value"));
    validateParamBox($("#location_input"), $("#location_value"));
});

这是外部函数:

function validateParamBox(inputbox, hiddenbox){
str = $("#target_content_hidden").val();
if($.trim(inputbox.val()).length == 0 ){
    inputbox.animate({borderColor: "#ff0000"}, 500);
    inputbox.animate({borderColor: "#ccc"}, 4500);
}else{
    var change_text = new RegExp(inputbox.val(),'gi');
    alert(change_text);
    $("#target_content_hidden").val(str.replace(change_text, inputbox.val()));
    hiddenbox.val(inputbox.val());
}}

对此的任何帮助将不胜感激。

Answer 1

1. str.replace(change_text, inputbox.val()) 抛出异常，因此在第一个 if-else 之后不会执行
2. 显然 borderColor 应该是 borderTopColor/borderBottomColor/borderLeftColor/borderRightColor。在这里发现了一个 - jQuery animate border color on hover?

事实证明您还需要包含 jQuery UI 库。

我冒昧地添加了所有缺失的变量。这是工作中的 jsfiddle - https://jsfiddle.net/7sp6a2w5/

这是修改后的函数

function validateParamBox(inputbox, hiddenbox) {
str = $("#target_content_hidden").val();
    if ($.trim(inputbox.val()).length == 0) {
        inputbox.animate({
            borderTopColor: "#ff0000",
            borderBottomColor: "#ff0000",
            borderLeftColor: "#ff0000",
            borderRightColor: "#ff0000"
        }, 500);
        inputbox.animate({
            borderTopColor: "#ccc",
            borderBottomColor: "#ccc",
            borderLeftColor: "#ccc",
            borderRightColor: "#ccc"
        }, 4500);
    } else {
        var change_text = new RegExp(inputbox.val(), 'gi');
        $("#target_content_hidden").val(str.replace(change_text, inputbox.val()));
        hiddenbox.val(inputbox.val());
    }
}