javascript - Jquery选择隐藏和显示问题: More than two elements-6ren

javascript - Jquery选择隐藏和显示问题: More than two elements

转载作者：行者123 更新时间：2023-12-03 06:16:46

最近尝试制作工作页面来根据按钮显示和隐藏每个元素，但我不知何故缺少一些东西来使这项工作正常进行，或者不知何故它根本不起作用。

当我运行此示例时，前两个“A”链接有效，但第三个无效，有没有办法将其实际分隔到每个元素显示单数的位置，同时隐藏其余元素？

这是我的编码:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">          </script>
        <script>
            $(document).ready(function(){
                $("p").hide();          //to hide all P elem for user to start
                $("#hide").click(function(){
                    $("p#2").show();
                    $("p#1").hide();    //Yes i tried grouping by selectors
                    $("p#3").hide();    //and also seperating like this
                });                     //but both didnt work :(
                $("#show").click(function(){
                    $("p#1").show();
                    $("p#2").hide();
                    $("p#3").hide();
                });
                $("#other").click(function(){
                    $("p#3").show();
                    $("p#1").hide();
                    $("p#2").hide();
                });
            });
        </script>
    </head>
    <body>
        <div>please select a button to begin
        <br />
        <br />
        <p id="1">If you click on the "Hide" button, I will disappear.</p>
        <p id="2">If you click on the "Show" button, i will disappear!</p>
        <p id="3">yay, another one</p>

        <a id="hide">Hide</a>
        <a id="show">Show</a>
        <a id="third">other</a>
    </div>
    </body>
</html>