选择隐藏和显示问题:多于两个元素

Jquery Selecting to hide and show issue: More than two elements

本文关键字：于两个 元素 问题 隐藏 显示 选择      更新时间：2023-09-26

最近尝试使工作页面显示和隐藏每个元素根据按钮，但我不知何故错过了一些东西，使这个工作，或不知何故它不工作。

当我运行这个例子时，前两个"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>

你需要替换这个:

$("#other").click(function(){

: 

$("#third").click(function(){


 $(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();
                });
                $("#third").click(function(){
                  
                    $("p#3").show();
                    $("p#1").hide();
                    $("p#2").hide();
                });
            });
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">          </script>
      
        <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>

相关文章：