Question

正文标记

<div id="stage1">
    <form id="form1" method="post">
        <button id="sm1" type="submit" class="button" onclick="Result(msg);"><span>GO – SM1</span></button>
        <div id="sm2">GO – SM2</div>
    </form>
    <button id="sm3"type="submit" class="button" style="vertical-align:middle"> GO – SM3</button>
</div>
<div id="stage2" hidden="">
    HELLO WORLD
</div>

脚本标记

<script> 
    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }    
    $(document).ready(function(){
        $("#sm1").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });
    });   
    $(document).ready(function(){
        $("#sm2").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });
    });   
    $(document).ready(function(){
        $("#sm3").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });
    });   
</script>

问题

当我点击按钮GO - SM1时，没有任何事情发生

但是当我点击DIV标签GO - SM2的区域时，stage1消失并且stage2出现

我也点击另一个按钮外形标签GO - SM3，stage1消失，stage2也出现。

如何

单击按钮GO - SM1然后stage1消失，stage2出现就像我点击GO - SM2和GO - SM3

Answer 1

确定第一步删除onclick更改类型以按钮不提交。

<div id="stage1">
    <form id="form1" method="post">
        <button id="sm1" type="button" class="button"><span>GO – SM1</span></button>
        <div id="sm2">GO – SM2</div>
    </form>
    <button id="sm3"type="button" class="button" style="vertical-align:middle"> GO – SM3</button>
</div>
<div id="stage2" hidden="">
    HELLO WORLD
</div>

步骤2清理一下

<script> 
    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }    
    $(document).ready(function(){
        $("#sm1").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });

        $("#sm2").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });

        $("#sm3").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });

    });   

</script>

这应该有所帮助。

点击时表单标记中的按钮不起作用

1 个答案: