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塊來實現這一點。

$(".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());
    }           
});

現在，當我按下按鈕運行此命令時，所有“如果”條件都可以工作-即它檢查輸入框是否為空，並閃爍所有3個輸入框。 但是，如果我向其中一個輸入框添加值，則僅執行“ else”塊，而其他兩個將被跳過。 如果我再更新一個框，則僅執行該新的else塊，其他都不執行。

到目前為止，我已經嘗試過-除了在Google和SO中搜索相似的答案兩天並檢查許多相似的答案之外，我還將if / else塊移到了一個單獨的函數中，並嘗試將框名作為參數傳遞給功能，但這也不起作用。 （此后的代碼如下所示-

$(".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動畫邊框顏色？

還發現您需要包括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());
    }
}