jquery click to hide and show another button
Question
I have two buttons set as hidden :
<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />
I have a jquery where I check some conditions fetched from the database. Either one of the button will be shown and that depends on if the condition is 1 or 0..That means when I click any of the button it must get hidden and the other one must shown up..? But it's not happening..The button I click gets hidden and the other button isn't shown up..If anyone can help.. My jquery :
$(document).ready(function() {
var condition = "<?php echo $condition; ?>"; //i get this from database
var c = condition;
if(c == 0){
$('#a').css({'display':''});
$('#a').click(function(){
$('#a').hide();
$('#b').show();
});
}else if(c == 1){
$('#b').css({'display':''});
$('#b').click(function(){
$('#b').hide();
$('#a').show();
}
});
3 answers
solution1
2 ACCPTED 2013-07-29 16:38:36
You need to move your .click(function(){}) outside of your if/else block, as condition / c never change, so the only the first .click(function(){}) works. The other one will never be called. This way, your hide/show is independent of the condition / c value.
$(document).ready(function() {
var condition = <?php echo $condition; ?>; //i get this from database
var c = condition;
if(c == 0){
$('#a').css({'display':''});
}else if(c == 1){
$('#b').css({'display':''});
}
$('#a').click(function(){
$('#a').hide();
$('#b').show();
});
$('#b').click(function(){
$('#b').hide();
$('#a').show();
});
});
see this jsFiddle example - http://jsfiddle.net/bWJ5A/1/
solution2
1 2013-07-29 16:35:01
var condition = "<?php echo $condition; ?>";
This should be modified to
var condition = <?php echo $condition; ?>;
You got a string, but you compared with a numeric.
solution3
0 2013-07-29 16:50:14
code like this, at butB click; you haven't close with "});"
<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
var condition = 0; //i get this from database
var c = condition;
if(c == 0){
$('#a').css({'display':''});
$('#a').click(function(){
$('#a').hide();
$('#b').show();
});
}else if(c == 1){
$('#b').css({'display':''});
$('#b').click(function(){
$('#b').hide();
$('#a').show();
});
}
});
</script>
<body>
<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />
</body>
</html>
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.