                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ)課程

這樣寫(xiě)為什么回不過(guò)去呢

<!DOCTYPE html>
<html>
??? <head>
??????? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??????? <title>挑戰(zhàn)題</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("簡(jiǎn)化");
?????????? $("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>

運(yùn)行結(jié)果：點(diǎn)擊更多出現(xiàn)：這時(shí)簡(jiǎn)化這里不是超鏈接，但是點(diǎn)擊簡(jiǎn)化還可以運(yùn)行，運(yùn)行結(jié)果：之后在點(diǎn)擊沒(méi)就不動(dòng)了，什么原因

aid123321

2016-04-09

源自：jQuery基礎(chǔ)課程 3-13

關(guān)注問(wèn)題我要回答

244

操作

收起

4 回答

C是什么
2016-05-04

原因我找到了，$("li:has('a')").text("簡(jiǎn)化");這樣寫(xiě)的時(shí)候并沒(méi)有改變a標(biāo)簽的text,導(dǎo)致你后面判斷條件if($("li:has('a')").text()==="更多") 不對(duì)，這里一輪循環(huán)后li:has('a')").text()===“”；所以就會(huì)一直執(zhí)行else里面的代碼，改的方法很簡(jiǎn)單，( li:has('a') a).text("簡(jiǎn)化")即可，更多也是同理。下面的代碼親測(cè)有效。

<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>挑戰(zhàn)題</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("簡(jiǎn)化");
????????????????$("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>