JQuery if-else überspringt alles nach der ersten gültigen Bedingung

Question

Ok, diese hat mich jetzt für eine Weile ratlos.

Ich habe 3 benannte Eingabefelder und 3 entsprechend benannte versteckte Variablen (kein Formular).

<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> 

Bei einem Klick auf eine Schaltfläche („personifizieren Inhalt“), verwende ich jQuery zu testen, ob die drei Eingabefelder einen Wert haben, und wenn es einen Wert hat, dann aktualisiert er die entsprechende verborgene Variable. Ich versuche, drei if/else Blöcke in jQuery zu verwenden, um dies zu bekommen.

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

Nun, wenn ich laufen diese durch Drücken der Taste, werden alle „if“ Bedingungen arbeiten - das ist es überprüft, ob die Eingabefelder leer sind, und blinkt alle drei Eingabefelder. Wenn ich jedoch einen Wert zu einem der Eingabefelder hinzufüge, wird NUR dieser "else" -Block ausgeführt, und die anderen beiden werden übersprungen. Wenn ich eine weitere Box aktualisiere, wird nur dieser neue Else-Block ausgeführt und keiner der anderen.

Was ich bisher versucht habe - abgesehen von der Suche nach ähnlichen Antworten in Google und SO für zwei Tage und Überprüfung durch viele ähnliche Antworten, habe ich die if/else Blöcke in eine separate Funktion verschoben und versucht, die Boxnamen zu übergeben als Parameter der Funktion, aber das funktioniert auch nicht. . (Der Code da sieht wie folgt aus -

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

und dies ist die externe Funktion:

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

Jede Hilfe zu diesem Thema würde geschätzt

Answer 1

1. str.replace (change_text, inputbox .val()) hat eine Ausnahme geworfen, wegen der es nach dem ersten nicht ausgeführt werden würde. if-else
2. Anscheinend sollte borderColor borderTopColor/borderBottomCol sein oder/borderLeftColor/borderRightColor stattdessen. Gefunden das hier - jQuery animate border color on hover?

Auch stellt sich heraus, Sie müssen jQuery UI-Bibliothek enthalten.

Ich nahm mir die Freiheit, alle fehlenden Variablen hinzuzufügen. Hier ist die Arbeits jsfiddle - https://jsfiddle.net/7sp6a2w5/

Und hier ist die modifizierte Funktion

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