Question

当我点击发布1或2或3按钮时，黄金文本将被隐藏，下次我将点击我希望隐藏银色文本。最后我将点击帖子3我希望隐藏浏览文本。它第一次工作，下次不起作用。

<div>

<p id="gg">Gold</p>

<p id="ss">Silver</p>

<p id="bb">Browse</p>

<button id="cancel">Cancel</button><br/><br/>

<button id="post1" value="">Post 1</button><br/><br/>
<button id="post2" value="">Post 2</button><br/><br/>
<button id="post3" value="">Post 3</button>

</div>

<script src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>

<script>
$(document).ready(function(){


        $("#post1").click(function(){
        //$("#g").hide();

        if ($('#gg:visible') && $('#ss:visible') && $('#bb:visible')) {  
            $("#gg").hide();
        }

        else if ($('#gg').is(':hidden') && $('#ss:visible') && $('#bb:visible')) {  
            $("#ss").hide();
            //alert('s')
        }
        else{
            $("#bb").hide();
        }
        });

        $("#post2").click(function(){
        //$("#g").hide();

        if ($('#gg:visible') && $('#ss:visible') && $('#bb:visible')) {  
            $("#gg").hide();
        }

        else if ($('#gg').is(':hidden') && $('#ss:visible') && $('#bb:visible')) {  
            $("#ss").hide();
            //alert('s')
        }
        else{
            $("#bb").hide();
        }

        });

        $("#post3").click(function(){
        //$("#g").hide();

        if ($('#gg:visible') && $('#ss:visible') && $('#bb:visible')) {  
            $("#gg").hide();
        }

        else if ($('#gg').is(':hidden') && $('#ss:visible') && $('#bb:visible')) {  
            $("#ss").hide();
            //alert('s')
        }
        else{
            $("#bb").hide();
        }

        });

    $("#cancel").click(function(){
        $("p").show();
    });
});
</script>

Answer 1

将您的javascript更改为：

$(document).ready(function(){


        $("#post1, #post2, #post3").click(function(){


        if ($('#gg').is(':visible') && $('#ss').is(':visible') && $('#bb').is(':visible')) {  
            $("#gg").hide();
        }

        else if ($("#gg").is(":hidden") && $('#ss').is(':visible') && $('#bb').is(':visible')) {  
            $("#ss").hide();

        }
        else{
            $("#bb").hide();
        }
        });



    $("#cancel").click(function(){
        $("p").show();
    });
});

以下是jsfiddle的工作

jquery单击按钮操作以隐藏或显示文本

1 个答案: