0

みんな。私はjqueryの初心者で、いくつか質問したいと思います。

「リセットボタン」を押すたびに、新しい乱数のセットを生成したいです。

しかし、解決策をグーグルで検索すると、ほとんどの人がページをリロードするか、機能全体をリロードしようとします。これを行う方法があるかどうか尋ねたいと思います。

そして、私はかなりダミーを書いていると思うので、コードを改善するのを手伝ってくれたらとても嬉しいです. 本当にありがとう！！！

フィドルで私のコードを見てください:) https://jsfiddle.net/v7bcjj1q/#&togetherjs=2nOVnkI34j

私のコード:

$(document).ready(function(){

    $('button[type=submit]').attr('disabled','disabled');

    var randomNum1;
    var randomNum2;

    //set the largeest number to display

    var maxNum = 20;
    var total;

    randomNum1 = Math.ceil(Math.random()*maxNum);
    randomNum2 = Math.ceil(Math.random()*maxNum);
    total =randomNum1 + randomNum2;

    $( "#question" ).prepend( randomNum1 + " + " + randomNum2 + "=" );

    // When users input the value

    $( "#ans" ).keyup(function() {

        var input = $(this).val();
        var slideSpeed = 200;

        $('#message').hide();

        if (input == total) {

            $('button[type=submit]').removeAttr('disabled');
            $('#success').slideDown(slideSpeed);
            $('#fail').slideUp(slideSpeed);

        }

        else {

            $('button[type=submit]').attr('disabled','disabled');
            $('#fail').slideDown(slideSpeed);
            $('#success').slideUp(slideSpeed);

        }

    });

    // Wheen "reset button" click, generating new randomNum1 & randomNum2
});
4

3 に答える 3

1

ボタンonClickにイベントを追加するだけreset

内部では、新しい数字、合計、明確な質問、明確な入力を生成する必要があります

$('button[type=submit]').attr('disabled', 'disabled');

var randomNum1;
var randomNum2;

//set the largeest number to display

var maxNum = 20;
var total;

randomNum1 = Math.ceil(Math.random() * maxNum);
randomNum2 = Math.ceil(Math.random() * maxNum);
total = randomNum1 + randomNum2;

$("#question").prepend(randomNum1 + " + " + randomNum2 + "=");

// When users input the value

$("#ans").keyup(function() {

  var input = $(this).val();
  var slideSpeed = 200;

  $('#message').hide();

  if (input == total) {

    $('button[type=submit]').removeAttr('disabled');
    $('#success').slideDown(slideSpeed);
    $('#fail').slideUp(slideSpeed);

  } else {

    $('button[type=submit]').attr('disabled', 'disabled');
    $('#fail').slideDown(slideSpeed);
    $('#success').slideUp(slideSpeed);

  }

});

// Wheen "reset button" click, generating new randomNum1 & randomNum2
$("#reset").on("click", function() {
  randomNum1 = Math.ceil(Math.random() * maxNum);
  randomNum2 = Math.ceil(Math.random() * maxNum);
  total = randomNum1 + randomNum2;
  $("#question").empty();
  $("#ans").val('');
  $("#question").prepend(randomNum1 + " + " + randomNum2 + "=");
});
* {
  padding: 0;
  margin: 0;
}
html,
body {
  font-family: 'Open Sans';
  font-weight: lighter;
  font-size: 12px;
  width: 100%;
  height: 100%;
}
#success,
#fail {
  display: none;
}
#message,
#success,
#fail {
  margin-top: 10px;
  margin-bottom: 10px;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
p {
  display: inline;
  margin-right: 5px;
}
input,
button {
  font-family: 'Open Sans';
  font-weight: lighter;
  font-size: 12px;
}
input {
  border: 1px solid #FFBBD7;
  width: 30px;
  height: 20px;
  text-align: center;
}
button {
  border: none;
  border-radius: 1.5em;
  color: #FFF;
  background: #FFBBD7;
  padding: 2.5px 10px;
  width: 75px;
  height: 30px;
  cursor: pointer;
  transition: background .5s ease-in-out;
}
button:hover:enabled {
  background: #303030;
}
button:disabled {
  opacity: .5;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="question"></p>
<input id="ans" type="text">
<div id="message">Please verify.</div>
<div id="success">Validation complete :)</div>
<div id="fail">Validation failed :(</div>
<button type="submit" value="submit">Submit</button>
<button type="reset" id="reset" value="reset">Reset</button>

于 2016-11-23T15:27:50.863 に答える
0

次のコードを追加して、次のように実行できます。

$('#reset').click(function(e){
  randomNum1 = Math.ceil(Math.random()*maxNum);
  randomNum2 = Math.ceil(Math.random()*maxNum);
  total =randomNum1 + randomNum2;
   $( "#question" ).html( randomNum1 + " + " + randomNum2 + "=" );
});

#resetこの場合、あなたのリセットボタンです。その ID を指定するか、最も気に入ったものに応じて選択を変更する必要があります。クリックすると、変数がリセットされ、.html から HTML が変更されますquestion。

コードを複製しただけですが、複数回使用しているため、単一の関数を作成することをお勧めします。

于 2016-11-23T15:28:04.210 に答える