My script doesn't work properly and doesn't throw an error
Question
I was just trying to make a button that slides up and down with jQuery but it works only 50% of the time. When I press "Slide up" it does work but it doesn't work with "Slide down". It doesn't give me any errors too...
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var test = true
var test2 = false
if(test == true){
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
});
}
else if(test2 == false){
$(document).ready(function(){
$(".btn2").click(function(){
$("p").slideDown();
});
});
}
</script>
</head>
<body>
<p>Hello Uranus</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
</html>
I think I'm overlooking something or I just suck at coding but any help would be appreciated!
7 answers
solution1
1 2017-02-20 14:49:49
You can simply use jQuery .slideToggle() :
$('.btn').on('click', function(){ $('p').slideToggle(); });
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <p>Hello Uranus</p> <button class="btn">Slide Up/Down</button>
solution2
0 2017-02-20 14:48:40
从您的代码中删除“其他”
solution3
0 ACCPTED 2017-02-20 14:49:46
Take a look to the basic javascript development ;)
If - Else
If your first condition is true the else will be not executed. If you want to have your all button working just do :
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
}
solution4
0 2017-02-20 14:50:54
Remove the if and else. Check this out:
https://jsfiddle.net/wnwrnbw7/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".btn1").click(function(){ $("p").slideUp(); }); $(".btn2").click(function(){ $("p").slideDown(); }); }); </script> <body> <p>Hello Uranus</p> <button class="btn1">Slide up</button> <button class="btn2">Slide down</button> </body>
solution5
0 2017-02-20 14:52:43
The conditions are preventing this from happening. Just remove the conditions altogether.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
});
$(document).ready(function(){
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>Hello Uranus</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
</html>
solution6
0 2017-02-20 14:52:48
You have done lots of syntax mistakes, as well as logical . So, i have solved those. Please replace your script with mine::
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideUp();
});
$(".btn2").click(function () {
$("p").slideDown();
});
});
solution7
0 2017-02-20 14:53:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello Uranus</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
<script src="../public/js/jq.js" charset="utf-8"></script>
<script>
function toggle(flag){
if (flag ==1) {
$('p').slideUp();
}else {
$('p').slideDown();
}
}
$('.btn1').click(function(){
toggle(1);
});
$('.btn2').click(function(){
toggle(0);
});
</script>
</html>
Note : Try this code include you jquery file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.