Question

我正在学习jquery。我有一个HTML＆jquery代码。我只想在输入值的答案为真时才显示按钮，否则应保持隐藏状态。另外，我想在屏幕上显示问题。看看是否有人可以提供帮助。谢谢

var random = Math.random();
var range = random * 2;
var incrment = range + 1;
var floor = Math.floor(incrment);
var ques1 = "what comes after 4?";
var ans = 5;

$(document).ready(function() {
  $("#bot").keyup(function() {
    if (ans == floor) {
      $("#pete").css("display", "block");
    } else {
      $("#pete").css("display", "none");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Name: <input type="text" id="bot" required="required"></p>
<input type="submit" id="pete" style="display:none;">

Answer 1

使用show()和hide()函数，我不知道您的floor和ans何时相等。

var random = Math.random();
    var range = random * 2 ;
    var incrment = range + 1;
    var floor = Math.floor(incrment);
    var ans = 5;

 floor=6; //for testing i gave
 $("#bot").keyup(function() {
    if (ans == $('#bot').val()) 
       $("#pete").show();
     else 
       $("#pete").hide();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label>What number comes after 4?</label>
<input type="number"  id="bot"  required="required"/>
    <input type="submit" id="pete" style="display:none;" >

Answer 2

这是您要求的完整代码。
使用innerHTML在屏幕上显示问题，然后使用.value获取用户..

输入的值。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <p id="question"></p>
     <p>Name: <input type="text"  id="bot"  required="required"></p>
    <input type="submit" id="pete" style="display:none;" >
</body>
    </html>

    <script type="text/javascript">
     var random = Math.random();

    var range = random * 2 ;

    var incrment = range + 1;

    var floor = Math.floor(incrment);
    var ques1 = "what comes after 4?";
    document.getElementById('question').innerHTML = ques1;
    var ans = 5;





      $("#bot").keyup(function() {
      var ansFromInput = document.getElementById('bot').value;
        console.log("ans , floor" , ans , ansFromInput);

        if (ans == ansFromInput) {
          $("#pete").css("display", "block");
        }
        else {
          $("#pete").css("display", "none");
        }
      });


    </script>

Answer 3

您可以执行类似的操作，

这里使用类来隐藏按钮，我们可以添加和删除类来实现这一点。

var random = Math.random();
var range = random * 2;
var incrment = range + 1;
var floor = Math.floor(incrment);
var ques1 = "what comes after 4?";

var floor = 5;

$('#ques').text(ques1);
$(document).ready(function() {
 
  
  $('#bot').on('input',function(e){
  
    if ($('#bot').val() == floor) {
      $("#pete").removeClass('hide');
    } else {
      $("#pete").addClass('hide');
    }
  });
  
});

.hide{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label> <p id="ques"> </p> </label>
<p><input type="text" id="bot" required="required"></p>
<input type="submit" id="pete" class="hide">

如何根据if / else条件在输入更改中固定显示/隐藏按钮

3 个答案: