Question

我的html文件中有以下代码。

<input type="submit" value="Submit Guess" id="submit">

我的javaScript文件中有以下代码。每次单击（#submit）按钮，我都希望执行下面的代码。问题是它在我第一次单击按钮时执行，但在此之后不会执行。每次单击按钮而不刷新页面时，如何执行以下代码？提前谢谢！

$(document).ready(function(){

$('#submit').click(function(){
    event.preventDefault();
    user_Input = $('#text').val();
    history_Guess.push(user_Input);

    $('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
    $('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');

});

如果需要，请在下方发布完整代码：

HTML：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Ben Levine | Guessing Game</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <header>
        <h1>Ben Levine</h1>
        <h2>Guessing Game</h2>
    </header>

    <div>
      <section>
            <form>
            <p>Guess a number (1-100)</p>
            <input type="text" name="guess" id="text"><br>
                <div id="chances">
                    <p>You have 5 more chances</p>
                </div>
                <div id="hot_Cold">
                    <p>You are hot, but you need to guess higher</p>
                </div>
                <div id="direction">
                    <p>You are getting hotter/colder</p>
                </div>
                <div id="history">
                    <p>Previous Guesses: </p>
                </div>
            <input type="submit" value="Submit Guess" id="submit">
            <input type="submit" value="Hint" id="hint"><br>
            <input type="submit" value="Reset Game" id="reset">
            </form>
      </section>

      <footer>
        <p>&copy; 2014 Ben Levine</p>
      </footer>

    </div>
    <script src="javaScript/jquery-2.1.3.min.js"></script>
    <script src="javaScript/application_2.js"></script>
  </body>

</html>

JavaScript的：

var random_Number = Math.floor(Math.random()*101);
var user_Input = 0;
var max_Guess = 5;
var history_Guess = [];


$(document).ready(function(){

$('#submit').click(function(event){
    event.preventDefault();
    user_Input = $('#text').val();
    history_Guess.push(user_Input);

    $('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
    $('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');

});

function status_Guess(){
    if(random_Number===user_Input){
        return Win();
    }else if(Math.abs(random_Number - user_Input) < 10){
        return "You are very Hot!"
    }else if(Math.abs(random_Number - user_Input) < 25){
        return "You are Hot!"
    }else if (Math.abs(random_Number - user_Input) < 50){
        return "You are cold!"
    }else{
        return "You are very cold!"
    }

};


function repeat_Check(){
    for (var i = 0; i<history_Guess.length; i++){
        if (history_Guess[i]===user_Input){
            return "You already guessed this number"
        }
    }
};


function above_Below(){
    if (user_Input === random_Number){
        return " Wow you are amazing!"
    }else if (user_Input < random_Number){
        return " Guess Higher!"
    }else{
        return " Guess Lower"
    }
};


function check_Turn(){
    if (history_Guess.length > max_Guess){
        return "Game Over!!!"
    }
};


function validate_Input(){

    var numbers = /^[0-9]+$/;  

    if (user_Input.value.match(numbers)){
        return true;
    }else{
        return false;
    }
};


function reset_Game(){
    new_Game();
};

function hotter_Colder(){
    if (history_Guess.length>0){
        if (Math.abs(random_Number - user_Input) < Math.abs(random_Number - history_Guess[history_Guess.length-1])){
            return "Getting hotter"
        }else{
            return "Getting colder"
        }
    }else{
        return "First Guess"
    }
};

function Hint(){
    return random_Number;
};


function Win(){
    alert("Congratulation, you won the game")
};

});

Answer 1

这些元素

$('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');

如果再次单击“提交”按钮，则

不再存在。试试这个：

$(function(){
// your other code here
$('#submit').click(function(){
  history_Guess.push($('#text').val());
  $('#chances').replaceWith("<p id='chances'> You have "+ (max_Guess - history_Guess.length) + ' chances left!</p>');
  $('#hot_Cold').replaceWith("<p id='hot_Cold'>"+status_Guess()+above_Below()+'</p>');
  return false;
});

真的，我不会替换任何东西。而是使用$(selcetor).html('code goes here');覆盖HTML元素的内容。

$(function(){
// your other code here
$('#submit').click(function(){
  history_Guess.push($('#text').val());
  $('#chances>p').html('You have '+(max_Guess - history_Guess.length)+' chances left!');
  $('#hot_Cold>p').html(status_Guess()+above_Below());
  return false; // don't even use the event Object
});

Answer 2

$('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');

$('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');

您正在替换您的div chances和hot_Cold，因此第二次点击时它们将不存在，将其更改为此以替换div的内容：

$('#chances').html('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');

$('#hot_Cold').html('<p>'+status_Guess()+above_Below()+'</p>');

Answer 3

event.preventDefault();无法做任何事情，因为您没有将event作为参数传递。

变化：

$('#submit').click(function(){

为：

$('#submit').click(function(event){

多次点击JQuery按钮

3 个答案: