Question

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Question</title>
</head>
<body>
    <div class="container-fluid">
        <div class="header">
            <h1>question {{ question.id }}</h1>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-8">
                <img class="photo" src="{{ question.image_source }}">
            </div>
            <div class="col-xs-12 col-md-4 info">
                <h5>current score: {{ score }}</h5>
                <hr>
                <form method="POST">
                    okay {{ user }}, what country is this in? <input type="text" name="country_guess" id="guess" required>
                    <button class="btn btn-success">submit</button>
                    <br>
                    <span></span>
                    <textarea id="pointsWorth" name="pointsWorth" rows="1">3</textarea>
                </form>
                <div id="message"></div>
                <div class="wrong_answers">wrong answers:</div>
            </div>
        </div>
    </div>
<script>
    let tries = 3;
    let wrongAnswers = [];

    $( "form" ).submit(function ( event ) {
        let guess = $('#guess').val().toUpperCase().trim();
        if ( guess === "{{ question.country }}") {
             $( "span" ).text( "Correct" ).show().fadeOut(3500).done(function() {
                alert('here');
                return;
        });
        }
        if ($.inArray(guess, wrongAnswers) !== -1){
            document.getElementById('message').innerHTML='<p>You\'ve already guessed ' + guess + ' - try again!</p>';
        } else {
            $("span").text(" Wrong ").show().fadeOut(3500);
            wrongAnswers.push(guess);
            tries--;
            document.getElementById('pointsWorth').innerHTML = tries.toString();
            $( ".wrong_answers" ).append('<p>' + guess + '</p>');
        }
        if ( tries === 0) return;
        document.getElementById('guess').value='';
        $('input:text').focus( function() { $(this).val(''); });
        event.preventDefault();
    });
</script>
</body>
</html>

我试图在提交返回并重新加载页面之前的3.5秒内显示“正确”消息-有什么想法吗？谢谢。

Answer 1

我猜您在单击表单中的“提交”按钮后就会刷新页面。默认情况下，表单将在刷新页面时发出POST请求，而fadeOut()不会阻止这种情况的发生。

因此，为了防止出现默认行为，请将event.preventDefault()添加到Submit处理程序，然后将带有this的表单引用到一个变量，然后对该变量调用Submit。像这样：

 $( "form" ).submit(function ( event ) {
        var thisForm = this;
        event.preventDefault(); // <-- Change 1 
        let guess = $('#guess').val().toUpperCase().trim();
        if ( guess === "{{ question.country }}") {
             $( "span" ).text( "Correct" ).show().fadeOut(3500,function(){
                  thisForm.submit(); // <-- Change 2
             })
        }

    });

Answer 2

这应该有效：

if ( guess === "{{ question.country }}") {
     $( "span" ).text( "Correct" ).show().fadeOut(3500, function() {
         alert('here');
         return;  
     });
}

Answer 3

您应该通过此链接获取更多详细信息-

https://forum.jquery.com/topic/using-the-callback-function-with-fadein-and-fadeout-jquery

Answer 4

感谢您的回答，我尝试了：

if ( guess === "{{ question.country }}") {
 $( "span" ).text( "Correct" ).show().fadeOut(3500, function() {
     alert('here');
     return;  
 });

但是没有用。一种解决方案是先不调用表单，而是调用按钮，然后在fadeOut函数内部提交表单：

$( "button" ).click(function ( event ) {
    event.preventDefault();
    let guess = $('#guess').val().toUpperCase().trim();
    if ( guess === "{{ question.country }}") {
         $( "span" ).text( "Correct" ).show().fadeOut(3500, function() {
             $( "form" ).submit();
    });

感谢您的帮助，希望此解决方案可以帮助其他人。

jQuery fadeOut完成后如何返回

4 个答案: