                        课程
                    
                        /前端开发
                        
                            /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>
    <div><ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li><a href="javascript:;">更多</a></li>
    </ul></div>
<script type="text/javascript">
$(function(){
    $("li:eq(0)").css("display","none");
    $("li:eq(3)").css("display","none");
    $("li:eq(4)").css("display","none");
    $("li:has('a')").click(function(){
        if($("li:has('a')").text()==="更多"){
            $("li:has('a')").text("简化");
           $("li:has('a')").css("display","list-item");
            $("li:eq(3)").css("display","list-item");
            $("li:eq(4)").css("display","list-item");
        }else{$("li:has('a')").text("更多");
         $("li:eq(0)").css("display","none");
       $("li:eq(3)").css("display","none");
       $("li:eq(4)").css("display","none");
        }
    })
    })
</script>
    </body>
</html>

运行结果：点击更多出现：这时简化这里不是超链接，但是点击简化还可以运行，运行结果：之后在点击没就不动了，什么原因

aid123321

2016-04-09

源自：jQuery基础课程 3-13

关注问题我要回答

242

操作

收起

4 回答

C是什么
2016-05-04

原因我找到了，$("li:has('a')").text("简化");这样写的时候并没有改变a标签的text,导致你后面判断条件if($("li:has('a')").text()==="更多") 不对，这里一轮循环后li:has('a')").text()===“”；所以就会一直执行else里面的代码，改的方法很简单，( li:has('a') a).text("简化")即可，更多也是同理。下面的代码亲测有效。

<!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>
    <div><ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
        <li>006</li>
        <li>007</li>
        <li><a href="#">更多</a></li>
    </ul></div>
    <script type="text/javascript">
    $(function(){
        $("li:eq(0)").css("display","none");
        $("li:eq(3)").css("display","none");
        $("li:eq(4)").css("display","none");
        $("li:has('a')").click(function(){
            if($("li:has('a')").text()==="更多"){
                 console.log($("li:has('a')").text()+"---1");
                $("li:has('a') a" ).text("简化");
                $("li:has('a')").css("display","list-item");
                $("li:eq(3)").css("display","list-item");
                $("li:eq(4)").css("display","list-item");
                console.log("1");
            }else{
                console.log($("li:has('a') ").text()+"---2");
                $("li:has('a') a" ).text("更多");
                $("li:eq(0)").css("display","none");
                $("li:eq(3)").css("display","none");
                $("li:eq(4)").css("display","none");
                console.log("2");
        }
    })
    })
    </script>
</body>
</html>