Quick demo

Question

如何使用jQuery显示文本而不会消失？

当用户键入数字时。然后我想要显示某个消息 - 你是热冷的温暖等等。此时消息闪烁进入屏幕，但我希望它留下然后用户可以继续播放，直到他放弃并想要显示随机数或重置游戏。

html中唯一相关的是

    <div class="output-container">

    </div>

这是我想要显示消息的地方。

这是application.js

// Hot or Cold JS game.
$(document).ready(function() {
    var randomNumber = Math.floor((Math.random() * 100 ) + 1);

    $('#Enter').click(function() {
        var guessNumber = document.getElementById('number');
        var difference = Math.abs(guessNumber - randomNumber);

        if (difference == 0) {
            // Display to user - "Perfect"
            $('.output-container').append('Perfect');
        } else if (difference < 5) {
            // Display to user - You're on Fire!
            $('.output-container').append('You are on Fire!');
        } else if (difference < 10) {
            // Display to user - Warm
            $('.output-container').append('Warm');
        } else if (difference < 30) {
            // Display to user - Ice Cold
            $('.output-container').append('Ice Cold');
        } else {
            // Display to user - You must be Frozen?
            $('.output-container').append('You must be Frozen!');
        };
    });

    // Start over
    $('#reset').click(function() {
        location.reload();
    });
    $('#show').click(function() {
        $('#show').hide();
        $('#append-number').append(randomNumber);
    });
});

Answer 1

Quick demo

对Javascript的更改：

var guessNumber = document.getElementById('number').value;
...
// $('.output-container').append(...)  // BAD
$('.output-container').text(...)  //GOOD

要么#Enter成为普通type="button"，要么在return false;处理程序的末尾添加.click()。否则它将继续提交和重新加载页面。

Answer 2

确切地说是as I assumed，您在表单中有按钮并单击它们会重新加载页面。将按钮类型更改为button：

<button type="button" ... >Enter</button>

发生

或 prevent the default event（提交表单）：

$('#Enter').click(function(event) {
    event.preventDefault();

});

但是，如果您不想使用“Enter”按钮作为提交按钮，请不要将其指定为一个。

请注意，您的代码还存在其他问题，但这超出了此问题的范围。

如何使用jQuery显示文本而不消失？

2 个答案:

Quick demo

对Javascript的更改：