Question

我有两个按钮：Btn1 <input type="button" class="buttons" value="Test"> 和Btn2 <input type="button" class="buttons" value="Test2">。我希望能够点击Btn1并且Btn1等待按下第二个按钮，如果按下第二个按钮（Btn2），输出是Test Test2可能吗？我知道如何按钮点击当然但我找不到第一个按钮等待第二个按钮的解决方案

Answer 1

试试这个： - 如果您使用这样的输入按钮： -

<input type="button" id="button1" class="buttons" value="Test" />
<input type="button" id="button2" class="buttons" value="Test2" />
<textarea name="test" id="test" rows="8" cols="80" readonly></textarea>

然后使用此脚本： -

<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var flag1 = false;
    var result;
    $(document).ready(function () {
        $("input[ID$='button1']").click(function () {
            flag1 = true;
            alert("you clicked button 'Test', Click another button for result");
        });
        $("input[ID$='button2']").click(function () {
            if (flag1 == true) {
                //flag1 = false;
                if (result)
                    result = result + " " + $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
                else
                    result = $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
                // alert(result);
                document.getElementById("test").innerHTML = result;
            }
            else {
                //alert("Please click button 'Test' first");
                if (result)
                    result = result + " " + $("input[ID$='button2']").val();
                else
                    result = $("input[ID$='button2']").val();
                document.getElementById("test").innerHTML = result;
            }
        });
        window.onload = function () {
            if (flag1 == true) {
                //flag1 = false;
                if (result)
                    result = result + " " + $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
                else
                    result = $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
                //alert(result);
                document.getElementById("test").innerHTML = result;
            }
        };
    });
</script>

如果你使用这样的按钮： -

<button id="btntest1" class="buttons">Test</button>
<button id="btntest2" class="buttons">Test2</button>
<textarea name="test" id="test" rows="8" cols="80" readonly></textarea>

然后使用此脚本： -

<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button[ID$='btntest1']").click(function () {
            flag1 = true;
            alert("you clicked button 'Test', Click another button for result");
        });
        $("button[ID$='btntest2']").click(function () {
            if (flag1 == true) {
                //flag1 = false;
                if (result)
                    result = result + " " + $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
                else
                    result = $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
                //alert(result);
                document.getElementById("test").innerHTML = result;
            }
            else {
                //alert("Please click button 'Test' first");
                if (result)
                    result = result + " " + $("button[ID$='btntest2']").html();
                else
                    result = $("button[ID$='btntest2']").html();
                document.getElementById("test").innerHTML = result;                    
            }
        });
    });
    window.onload = function () {
        if (flag1 == true) {
            //flag1 = false;
            if (result)
                result = result + " " + $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
            else
                result = $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
            //alert(result);
            document.getElementById("test").innerHTML = result;
        }
    };
</script>

希望这会对你有所帮助。

Answer 2

取决于您的需求。

1-显示按钮1启用 2-显示按钮2禁用 3-点击按钮1： 3.1：将标志设置为btn1_clicked = true;和其他你需要的变量 3.2：启用按钮2 4 onclick按钮2执行输出

这只是一种全球性思维，你可以适应。

Answer 3

所以，根据我的评论的想法你可以这样做：

btn1 = document.getElementById('btn-1');
btn2 = document.getElementById('btn-2');

btn1.addEventListener('click', function(){
  btn2.removeAttribute('disabled');
  btn1.disabled = 'disabled';
});

btn2.addEventListener('click', function(){
  btn1.removeAttribute('disabled');
  btn2.disabled = 'disabled';
  alert(btn2.value);
});

<input id="btn-1" type="button" class="buttons" value="Test">
<input id="btn-2" type="button" class="buttons" value="Test 2" disabled>

Answer 4

根据我的评论...

OnButton1Click - ＆gt;将标志设置为true
OnButton2Click - ＆gt;如果Variable为true - ＆gt;如果变量为假，则为“Test Test2” - ＆gt; “Test2的”

我创建了一个快速的例子，所有的香草JS。

JSBin Example

按钮单击以等待按钮单击

4 个答案: