javascript - SlideToggle 功能不适用于按钮提交

Question

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, animi quia odio eligendi! Ducimus ad fugit, sed, accusantium laboriosam vero, mollitia natus repudiandae possimus delectus laborum quidem beatae quibusdam tenetur!</p>

<input type="button" class="btnRegular" value="regular">
<input type="submit" class="btnSubmit">

我有以下代码，其中包含一些 p 文本和两个按钮。一个是常规按钮，另一个是“提交”按钮。当我添加以下 jquery 时，只有 btnRegular 有效。 submit 按钮没有。为什么是这样？难道我的jq错了？

$(function () {
    //for regular putton
    $("#btnRegular").click(function () {
        $("p").slideToggle();
    });


    //for submit button
    $("#btnSubmit").click(function () {
        $("p").slideToggle();
    });





}); 

我不认为我的代码有问题，因为它适用于常规按钮，但为什么不适用于特殊的提交按钮？

Answer 1

您正在按钮上使用类，这就是它不起作用的原因

//这里您使用btnRegular作为类

<input type="button" class="btnRegular" value="regular">

//我已将 btnRegular 更改为 id

<input type="button" id="btnRegular" value="regular">

$(function () {
    //for regular putton
    $("#btnRegular").click(function() {
        $("p").slideToggle();
    });


    //for submit button
    $("#btnSubmit").click(function() {
        $("p").slideToggle();
    });

}); 

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, animi quia odio eligendi! Ducimus ad fugit, sed, accusantium laboriosam vero, mollitia natus repudiandae possimus delectus laborum quidem beatae quibusdam tenetur!</p>

<input type="button" id="btnRegular" value="regular">
<input type="submit" id="btnSubmit">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>