jquery单击以隐藏并显示另一个按钮 - jquery click to hide and show another button

jquery click to hide and show another button

我有两个按钮设置为隐藏：

<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />

我有一个jquery，用于检查从数据库中提取的一些条件。任何一个按钮都会显示，这取决于条件是1还是0。这意味着当我单击任何按钮时，它都必须隐藏，另一个必须显示。。？但这并没有发生。。我单击的按钮被隐藏，而另一个按钮则不显示。。如果有人能帮忙的话。。我的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();
        }
        });

您需要将.click(function(){})移动到if/else块之外，因为condition/c永远不会更改，所以只有第一个.click(function(){})可以工作。另一个永远不会被调用。这样，隐藏/显示就独立于condition/c值。

$(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();
        });
    });

请参阅这个jsFiddle示例-http://jsfiddle.net/bWJ5A/1/

var condition = "<?php echo $condition; ?>";

应将其修改为

var condition = <?php echo $condition; ?>;

你得到了一个字符串，但你与一个数字进行了比较。

这样的代码，点击按钮B；您尚未以"｝）；"结束

<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>