Javascript 单击时表单标签中的按钮不'；行不通

主体标签

<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
GO–SM2
GO–SM3
你好，世界

脚本标记

<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>

功能睡眠（时间）{
返回新承诺（（resolve）=>setTimeout（resolve，time））；
}    
$（文档）.ready（函数（）{
$（“#sm1”）。单击（函数（）{
美元（“#阶段1”）。淡出（600）；
睡眠（700）。然后（（）=>{
美元("stage2),法代因(600),；
});
});
});   
$（文档）.ready（函数（）{
$（“#sm2”）。单击（函数（）{
美元（“#阶段1”）。淡出（600）；
睡眠（700）。然后（（）=>{
美元("stage2),法代因(600),；
});
});
});   
$（文档）.ready（函数（）{
$（“#sm3”）。单击（函数（）{
美元（“#阶段1”）。淡出（600）；
睡眠（700）。然后（（）=>{
美元("stage2),法代因(600),；
});
});
});   

问题

当我单击GO–SM1按钮时，什么也没有发生

但当我点击DIV标签GO–SM2区域时，stage1消失，stage2出现

我还点击了另一个按钮外部表单标签GO–SM3，stage1消失，stage2也出现

如何

---

要单击按钮GO–SM1，则stage1消失，stage2出现，就像我单击GO–SM2和GO–SM3一样。步骤一：删除单击更改类型按钮“不提交”

<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>

GO–SM1
GO–SM2
GO–SM3
你好，世界

第二步把这个清理一下

<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>

功能睡眠（时间）{
返回新承诺（（resolve）=>setTimeout（resolve，time））；
}    
$（文档）.ready（函数（）{
$（“#sm1”）。单击（函数（）{
美元（“#阶段1”）。淡出（600）；
睡眠（700）。然后（（）=>{
美元("stage2),法代因(600),；
});
});
$（“#sm2”）。单击（函数（）{
美元（“#阶段1”）。淡出（600）；
睡眠（700）。然后（（）=>{
美元("stage2),法代因(600),；
});
});
$（“#sm3”）。单击（函数（）{
美元（“#阶段1”）。淡出（600）；
睡眠（700）。然后（（）=>{
美元("stage2),法代因(600),；
});
});
});   

---

这应该会有帮助。

点击F12，查看您的控制台。为什么有多个document.ready（）？@want2learn，因为我在sm1、sm2和sm3三个区域显示。sm2和sm3工作正常，但不是sm1 T_T@AsiaDep您不需要具有多文档就绪功能，这会使代码变得笨拙。回到你的问题，你有没有注意到Richard在answer@want2learn是的，我知道，它仍然不适用于ID sm1，我想可能是在表单标签中，然后我猜是$（“#sm1”）调用是错误的？我删除了onclick，但它不起作用。仍然没有发生任何事情。将类型更改为button？我将按钮类型更改为输入类型“submit”（表单标记中的id='sm1'）。并且也没有发生任何事情…我几分钟前尝试过，它仍然对sm1不起作用（尝试所有新代码，删除type='submit'并将按钮标记更改为input标记）我认为有问题，因为它是表单标记？如果它在标记之外，则没有问题，因此调用？@AsiaDep try$（“#sm1”）可能会遇到$（“#sm1”）问题。在（“单击”，“#stage1”，函数（）{