在完成作业时遇到几个小时才解决的问题。
1 <ul class="rangking" id="rangking"> 2 <li class=""> 3 <p class="fold" id="fold-0"> 4 <a href="/source/0ac72666c99d4b56855a1b0466ff68a6_4"><i>01</i>苗疆蛊事1</a> 5 </p> 6 <div class="unfold" id="unfold-0"> 7 <i>01</i> 8 <div class="border f-cb"> 9 <a class="img" href="/source/0ac72666c99d4b56855a1b0466ff68a6_4" target="_blank" title="苗疆蛊事1"><img src="https://easyreadfs.nosdn.127.net/ps50tIr31t2SKypqA4heBg==/8796093024769312877" alt="苗疆蛊事1"></a> 10 <h3><a href="/source/0ac72666c99d4b56855a1b0466ff68a6_4" target="_blank" title="苗疆蛊事1">苗疆蛊事1</a></h3> 11 <p>南无袈裟理科佛</p> 12 </div> 13 </div> 14 </li> 15 <li> 16 <p class="fold" id="fold-1"> 17 <a href="/source/c34b227648174613a910bf011b1ef544_4"><i>02</i>职场“厚黑”系列小说精选（共12册）</a> 18 </p> 19 <div class="unfold" id="unfold-1"> 20 <i>02</i> 21 <div class="border f-cb"> 22 <a class="img" href="/source/c34b227648174613a910bf011b1ef544_4" target="_blank" title="职场“厚黑”系列小说精选（共12册）"><img src="https://easyreadfs.nosdn.127.net/ahCrtsF9Z01K_EzSbuLPDg==/8796093024511457161" alt="职场“厚黑”系列小说精选（共12册）"></a> 23 <h3><a href="/source/c34b227648174613a910bf011b1ef544_4" target="_blank" title="职场“厚黑”系列小说精选（共12册）">职场“厚黑”系列小说精选（共12册）</a></h3> 24 <p>龙在宇,普扬,郭宝平,洪与,许开祯</p> 25 </div> 26 </div> 27 </li> 28 <li> 29 <p class="fold" id="fold-2"> 30 <a href="/source/d382e6724ed74ee2b418844df2536cd8_4"><i>03</i>82年生的金智英</a> 31 </p> 32 <div class="unfold" id="unfold-2"><i>03</i> 33 <div class="border f-cb"> 34 <a class="img" href="/source/d382e6724ed74ee2b418844df2536cd8_4" target="_blank" title="82年生的金智英"><img src="https://easyreadfs.nosdn.127.net/Y2j7GbqsRNVvfBF8qzTMjw==/8796093024766744554" alt="82年生的金智英"></a> 35 <h3><a href="/source/d382e6724ed74ee2b418844df2536cd8_4" target="_blank" title="82年生的金智英">82年生的金智英</a></h3> 36 <p>【韩】赵南柱,尹嘉玄</p> 37 </div> 38 </div> 39 </li> 40 <li> 41 <p class="fold" id="fold-3"> 42 <a href="/source/e3bd26a696d14b68a7386af8bbd1aa72_4"><i>04</i>三体全集（共3册）</a> 43 </p> 44 <div class="unfold" id="unfold-3"><i>04</i> 45 <div class="border f-cb"> 46 <a class="img" href="/source/e3bd26a696d14b68a7386af8bbd1aa72_4" target="_blank" title="三体全集（共3册）"><img src="https://easyreadfs.nosdn.127.net/BfzCpowva5L3ONGUauj_zg==/8796093024767589094" alt="三体全集（共3册）"></a> 47 <h3><a href="/source/e3bd26a696d14b68a7386af8bbd1aa72_4" target="_blank" title="三体全集（共3册）">三体全集（共3册）</a></h3> 48 <p>刘慈欣</p> 49 </div> 50 </div> 51 </li> 52 <li> 53 <p class="fold" id="fold-4"> 54 <a href="/source/670a12f14b9349948422ad9413cbc0fa_4"><i>05</i>如何让你爱的人爱上你</a> 55 </p> 56 <div class="unfold" id="unfold-4"><i>05</i> 57 <div class="border f-cb"> 58 <a class="img" href="/source/670a12f14b9349948422ad9413cbc0fa_4" target="_blank" title="如何让你爱的人爱上你"><img src="https://easyreadfs.nosdn.127.net/VBD7vIP6C4tl2beWdfMRJA==/8796093024699174818" alt="如何让你爱的人爱上你"></a> 59 <h3><a href="/source/670a12f14b9349948422ad9413cbc0fa_4" target="_blank" title="如何让你爱的人爱上你">如何让你爱的人爱上你</a></h3> 60 <p>【美】莉儿·朗蒂</p> 61 </div> 62 </div> 63 </li> 64 <li> 65 <p class="fold" id="fold-5"> 66 <a href="/source/22309256966242dd89d2b35592ef5f92_4"><i>06</i>光荣时代</a> 67 </p> 68 <div class="unfold" id="unfold-5"><i>06</i> 69 <div class="border f-cb"> 70 <a class="img" href="/source/22309256966242dd89d2b35592ef5f92_4" target="_blank" title="光荣时代"><img src="https://easyreadfs.nosdn.127.net/y_sHqWpTI7PB2JQgPn1t8Q==/8796093024767902451" alt="光荣时代"></a> 71 <h3><a href="/source/22309256966242dd89d2b35592ef5f92_4" target="_blank" title="光荣时代">光荣时代</a></h3> 72 <p>魏人,张卫华</p> 73 </div> 74 </div> 75 </li> 76 <li> 77 <p class="fold" id="fold-6"> 78 <a href="/source/8cf88fa970f54d0fb25776a7576424d5_4"><i>07</i>主角（第十届茅盾文学奖获奖作）</a> 79 </p> 80 <div class="unfold" id="unfold-6"><i>07</i> 81 <div class="border f-cb"> 82 <a class="img" href="/source/8cf88fa970f54d0fb25776a7576424d5_4" target="_blank" title="主角（第十届茅盾文学奖获奖作）"><img src="https://easyreadfs.nosdn.127.net/iXNURS4xN7uTT2EgKFE4Yw==/8796093024768208703" alt="主角（第十届茅盾文学奖获奖作）"></a> 83 <h3><a href="/source/8cf88fa970f54d0fb25776a7576424d5_4" target="_blank" title="主角（第十届茅盾文学奖获奖作）">主角（第十届茅盾文学奖获奖作）</a></h3> 84 <p>陈彦</p> 85 </div> 86 </div> 87 </li> 88 <li> 89 <p class="fold" id="fold-7"> 90 <a href="/source/0ca3b6145fbe4f9fa15d39f8b27b8475_4"><i>08</i>魔兽世界编年史（史诗级套装）</a> 91 </p> 92 <div class="unfold" id="unfold-7"><i>08</i> 93 <div class="border f-cb"> 94 <a class="img" href="/source/0ca3b6145fbe4f9fa15d39f8b27b8475_4" target="_blank" title="魔兽世界编年史（史诗级套装）"><img src="https://easyreadfs.nosdn.127.net/i7L4e-FBQW4gb7Kr0kfh4w==/8796093024650578933" alt="魔兽世界编年史（史诗级套装）"></a> 95 <h3><a href="/source/0ca3b6145fbe4f9fa15d39f8b27b8475_4" target="_blank" title="魔兽世界编年史（史诗级套装）">魔兽世界编年史（史诗级套装）</a></h3> 96 <p>【美】克里斯·梅森,刘媛,王阁炜</p> 97 </div> 98 </div> 99 </li> 100 <li> 101 <p class="fold" id="fold-8"> 102 <a href="/source/a2d55d80ae4c46bc97b22a8aa2f7f079_4"><i>09</i>魔兽世界编年史·第三卷</a> 103 </p> 104 <div class="unfold" id="unfold-8"><i>09</i> 105 <div class="border f-cb"> 106 <a class="img" href="/source/a2d55d80ae4c46bc97b22a8aa2f7f079_4" target="_blank" title="魔兽世界编年史·第三卷"><img src="https://easyreadfs.nosdn.127.net/aIrQVxgQ67DuSCt6CARMDw==/8796093024403242631" alt="魔兽世界编年史·第三卷"></a> 107 <h3><a href="/source/a2d55d80ae4c46bc97b22a8aa2f7f079_4" target="_blank" title="魔兽世界编年史·第三卷">魔兽世界编年史·第三卷</a></h3> 108 <p>【美】克里斯·梅森,王阁炜</p> 109 </div> 110 </div> 111 </li> 112 </ul>
1 //榜单部分 2 var ranking_ul=document.getElementById("rangking"); 3 var ranUlArr=ranking_ul.children; 4 5 for(var i = 0; i < ranUlArr.length; i++) { 6 ranUlArr[i].index = i; 7 } 8 9 ranUlArr[0].className="deployment"; 10 11 //console.log(ranUlArr[0].children[0]); 12 DisplayNone(ranUlArr[0].children[0].id); 13 DisplayBlock(ranUlArr[0].children[1].id); 14 15 function DisplayBlock(obj) { 16 document.getElementById(obj).style.display="block"; 17 } 18 19 function DisplayNone(obj) { 20 document.getElementById(obj).style.display="none"; 21 } 22 //var ranFlag=0; 23 function clearDeployment(){ 24 for(var i=0;i<ranUlArr.length;i++){ 25 ranUlArr[i].className=''; 26 DisplayBlock(ranUlArr[i].children[0].id); 27 DisplayNone(ranUlArr[i].children[1].id); 28 } 29 //console.log(ranUlArr[0].children[0].id); 30 } 31 function playDeployment(index_two){ 32 ranUlArr[index_two].className="deployment"; 33 DisplayBlock(ranUlArr[index_two].children[1].id); 34 DisplayNone(ranUlArr[index_two].children[0].id); 35 } 36 37 for(var i=0;i<ranUlArr.length;i++){ 38 ranUlArr[i].onmouseover=function(){ 39 clearDeployment(); 40 playDeployment(this.index); 41 console.log(this.index); 42 } 43 }
实现的效果是要随鼠标箭头指向哪个li，那个li的fold的display设置为none，unfold的display设置为block；在js中document.getElementById(obj).style.display="";来修改样式。
我的问题所在是当ID值相同时，js只会更改第一个出现的ID的样式。我把class为fold的部分的ID都设置成了fold，把class为unfold的部分的ID都设置成了unfold。所以只是第一个li中的display样式变换了。