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

现在，当我按下按钮运行时，所有“if”条件都有效 - 即检查输入框是否为空，并闪烁所有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

str.replace（change_text，inputbox.val（））抛出异常，因为在第一个if-else之后它不会执行
显然，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());
    }
}

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

1 个答案: