slideToggle功能不适用于按钮提交

时间:2016-12-27 03:03:25

标签: javascript jquery html css



<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">
&#13;
&#13;
&#13;

我有以下代码,其中包含一些p文本和两个buttons。一个是regular button,另一个是"submit"按钮。当我添加以下jquery时,只有btnRegular有效。 submit按钮没有。为什么是这样?我的jq错了吗?

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


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





}); 

我不认为我的代码是错误的,因为它适用于常规按钮,但为什么不使用特殊提交按钮?

2 个答案:

答案 0 :(得分:0)

您正在使用按钮上的类,这就是为什么它不起作用

//这里您使用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> 

答案 1 :(得分:0)

因为你正在使用类而在js中你试图使用#id selector。

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


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





}); 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<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">