Question

我正在使用以下脚本在填写正确输入时显示div。但是，只要输入填写错误，我想展示另一个div。

$(document).ready(function () {
$('#inputId').bind('keyup', function () {
    $('#volgende div').hide();
    var divName = this.value;
    if (divName) {
        $('#volgende #' + divName).show();
    }
});
});

的jsfiddle：
http://jsfiddle.net/QwCQm/

我应该在某个地方添加一个'else'，但我似乎无法使它工作..

Answer 1

尝试：

$(document).ready(function () {

    $('#inputId').bind('keyup', function () {
        $('#volgende div').hide();
        var divName = $(this).val(),
            div     = $('#volgende #' + divName);

        if (div.length) {
            div.show();
        } else {
            // do something else
        }
    });

});

Answer 2

这是一个简单而粗略的例子：

Demo

HTML

<input type="text" id="inputId" maxlength="8" autocomplete="off">
<div id="volgende">
    <div id="abc-good" class="btn">Nice job! You know your ABC's</div>
    <div id="abc-bad" class="btn">Not there yet...</div>
</div>

JS

$('#inputId').bind('keyup', function () {

    $('#volgende div').hide();

    var desiredVal = 'abc';    // what the user SHOULD type
    var divName = this.value;  // what the user DID type

    var msgKey = divName == desiredVal ? 'good' : 'bad';

    // if the user has typed something, show the message
    if( divName.length > 0 )
        $('#'+desiredVal+'-'+msgKey).show()
});

Answer 3

您应该尝试change事件。所以......

$('#inputId').bind('change', function () {
    if ($(this).val() != "[CORRECT_INPUT]") {
        $('#my_incorrect_input_div').show();
    }
});

在错误的字段输入上显示div

3 个答案:

Demo