Jquery选择隐藏和显示问题:两个以上的元素

时间:2016-08-22 02:31:27

标签: javascript jquery

最近试图让工作页面按照按钮显示和隐藏每个元素,但我在某种程度上错过了使这项工作失效的东西,或者不知何故它根本不起作用。

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

2 个答案:

答案 0 :(得分:1)

你需要替换它:

 route.map({'/': {component: a, subRoutes: { '/app': component: b }}}

使用:

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

答案 1 :(得分:0)

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