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

3

为了可重用性，可以使用单独的函数来生成问题

var total;

function getRandom(){return Math.ceil(Math.random()* 20);}
function createSum(){
        var randomNum1 = getRandom(),
            randomNum2 = getRandom();
    total =randomNum1 + randomNum2;
  $( "#question" ).text( randomNum1 + " + " + randomNum2 + "=" );  
  //in case of reset
  $('#success, #fail').hide();
  $('#message').show();
}

在文档加载中，可以调用该函数进行初始化并随后附加到单击事件

$(document).ready(function(){

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

    //create initial sum
    createSum();
    // On "reset button" click, generate new random sum
    $('button[type=reset]').click(createSum);

    //....

进一步的一步是在一个函数中设置可见性，该函数（重新）检查 keyup 和 reset 上的输入。 示例小提琴

于 2016-11-23T16:24:10.167 回答
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 从question.

我只是通过复制代码来做到这一点，但您可能希望为它创建一个函数，因为您多次使用它。

于 2016-11-23T15:28:04.210 回答