                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

为什么按照下面的代码实现不了重复点击切换属性的问题?

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li style="display:none">4</li>
            <li style="display:none">5</li>
            <li>6</li>
            <li>7</li>
            <a href="javascript:">更多</a>
        </ul>
        <script>
         var $a=$("li:hidden");
            $("a:contains('更多')").click(function(){
                $("a").html("简化");
                $a.show();
            })
            $("a:contains('简化')").click(function(){
                $("a").html("更多");
                $a.hide();
            }) 
        </script>
    </body>
</html>

点击第一次有变化,再点击时就没有什么反应了,求大神帮忙解决.(我是新手)

慕的地1208773

2016-04-26

源自：jQuery基础课程 3-13

关注问题我要回答

324

操作

收起

2 回答

Linus_Ni 回答被采纳 +3 积分
2016-04-28

 $("a:contains('简化')").click(function(){
                $("a").html("更多");
                $a.hide();
            })

这段代码只会在页面初始化的时候执行一次，所以你第二次点击时没有反应，按照你的想法可以这样改一下

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
     
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li style="display:none">4</li>
            <li style="display:none">5</li>
            <li>6</li>
            <li>7</li>
            <a href="javascript:">更多</a>
            <a href="javascript:">简化</a>
        </ul>
        <script>
         var $a=$("li:hidden");         
            $("a:contains('更多')").click(function(){
                $("a:contains('简化')").show();
                $(this).hide();
                $a.show();
            });
            $("a:contains('简化')").click(function(){
                $("a:contains('更多')").show();
                $(this).hide();
                $a.hide();
            });
            $("a:contains('简化')").hide();
        </script>
    </body>
</html>