2016-12-27 54 views
1

的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" class="btnRegular" value="regular"> 
 
<input type="submit" class="btnSubmit">

我有一些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(); 
    }); 





}); 

我不认为我的代码是错误的,因为它与常规按钮一起工作,但为什么不为特殊的提交按钮?

回答

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>

+0

NOP你可以改变的事情只能等待,我会解释 –

+0

哦,我看到我的错误 –

+0

如果我的回答是使用全给你,请接受的答案 –

0

因为您正在使用class和js,所以您正尝试使用#id选择器。

$(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">