Question

我正在尝试制作一个益智游戏，用户必须按特定顺序按下按钮，如果用户按下按钮，他们会用密码（3位数）填充文本框（将被隐藏）（3,2,1）表格将自动提交并重定向到另一页..

我试过，但我无法做到

这是我的代码：

<form  method="POST">
<input type="text"  value="" id="text1" name="text1" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="1" />
<input type="button" value="Click Me" id="2" />
<input type="button" value="Click Me" id="3" />

</form>

jquery的

$(function () {
    $('#1').click(function(e) {
        var text = $('#text1');
        text.val(text.val() + '1');  
        $('#1').attr("disabled", true);     

    });
        $('#2').click(function(e) {
        var text = $('#text1');
        text.val(text.val() + '2');    
        $('#2').attr("disabled", true);     
    });
            $('#3').click(function(e) {
        var text = $('#text1');
        text.val(text.val() + '3');    
        $('#3').attr("disabled", true);     
    });

});
$('#text1').trigger('change') {
     alert('Changed');
});

Answer 1

我不是100％确定这是否正常工作或是否导致错误：

$(text1).val($(text1)+$(this).id); // might cause an error

代码：

$(document).on('click','#1',function()){
    $(text1).val($(text1)+$(this).id);
}
$(document).on('click','#2',function()){
    $(text1).val($(text1)+$(this).id);
}
$(document).on('click','#3',function()){
    $(text1).val($(text1)+$(this).id);
}
$(document).on('change','#text1'){
    alert('Changed to: '+$(this).val());
});

你可以尝试一下，看看这是否有效？

Answer 2

如果删除最后一段代码

，则有效

$('#text1').trigger('change') {
     alert('Changed');
});

我认为最好的方法是使用String变量而不是文本输入，并在单击每个按钮后检查其值，例如

var string = "";
$('#1').click(function(e) {
    var = var + "1";
    $('#1').attr("disabled", true);     
    checkCode();
});
$('#2').click(function(e) {
    var = var + "2"; 
    $('#2').attr("disabled", true);     
    checkCode();
});
$('#3').click(function(e) {
    var = var + "3";
    $('#3').attr("disabled", true);    
    checkCode(); 
});

Answer 3

您可以执行以下操作：foreach单击答案按钮，取消当前按钮更新输入值。一旦用户单击所有答案按钮，检查组合是否正确，是否重定向您的页面。

$(function () {
    var correct_order="321";
    var clicks=0;
    var max_clicks=$('.answer').length;
    $('.answer').click(function(e) {
        clicks++;
        $('#text1').val($('#text1').val()+$(this).data('info'));  
        $(this).attr("disabled", true);
        if(clicks==max_clicks){
          if( $('#text1').val()==correct_order) {
               $('#answer_info').html("<p>Correct answer</p>");
               window.location.href = "https://yourpage";
          }
          else  {
               $('#answer_info').html("<p>Wrong answer</p>");
          }
        }

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form  method="POST">
<input type="text"  value="" id="text1" name="text1" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="1" class="answer"  data-info="1"/>
<input type="button" value="Click Me" id="2" class="answer"  data-info="2"/>
<input type="button" value="Click Me" id="3" class="answer"  data-info="3"/>

</form>
<div id="answer_info">

</div>

必须按特定顺序按下按钮才能发送表单 - jquery

3 个答案: