JavaScript 排他思想的具体实现

2022-04-15 22:38:44 来源：易采站长站作者：

在前面的博客中，小熊更新了相关操作元素的方法，但是如果有同一组元素，我们想要某一个元素实现某种样式，这时需要怎么办呢？这里就要用到循环的排他思想。

dding: 0; } .box_1 { width: 800px; height: 400px; background-color:rgb(141, 169, 173); margin: 100px auto; } ul { position:absolute; top: 64px; left:220px; height: 35px; line-height: 35px; text-align: center; } li { width: 80px; height: 35px; list-style: none; float: left; border: 1px solid #ccc; margin-left: 2px; border-top-left-radius: 6px; border-top-right-radius: 6px ; } .li1 { font-weight: 700; color: black; border-bottom: none; background-color: skyblue; cursor: pointer; } .item{ display:none; } </style></head><body> <div class = 'box'> <ul> <li class='li1'>标签一</li> <li>标签二</li> <li class = 'li2' style="width:150px">自适应宽度的标签</li> </ul> <div class="box_1"> <div class="item" style = "display:block">第一个标签的内容</div> <div class="item">第二个标签的内容</div> <div class="item">自适应宽度的标签的内容</div> </div> </div> <script> var li = document.querySelectorAll('li'); console.log(li); var item = document.querySelectorAll('.item'); console.log(item); for(var i =0;i<li.length;i++){ li[i].setAttribute('index',i); li[i].onclick = function(){ for(var j =0;j<item.length;j++){ li[j].className = ''; console.log(li[i]); } this.className = 'li1'; var index = this.getAttribute('index'); console.log(index); for(var k = 0;k<item.length;k++){ item[k].style.display='none'; } item[index].style.display = 'block'; } } </script></body></html>

实现效果为：

14px; } </style></head><body> <div class="box"> <table> <tr> <td colspan="4" class= 'header'>你被“最美乡村女教师”感动了吗<span>(必选)</span></td> </tr> <tr> <td class='t1'><input type="checkbox" name="" >很感动，她很美</td> <td> <div class="bar"> <div class=" bar_in bar_in1"> </div> </div> </td> <td>0(0%)</td> </tr> <tr> <td class='t1'><input type="checkbox" name="" id="">很感动，她很美</td> <td> <div class="bar"> <div class=" bar_in bar_in2"> </div> </div> </td> <td>335733(96.16%)</td> </tr> <tr> <td class='t1'><input type="checkbox" name="" id="">没感觉，这样的事很多</td> <td> <div class="bar"> <div class="bar_in bar_in3"> </div> </div> </td> <td>4997(1.43%)</td> </tr> <tr> <td class='t1'><input type="checkbox" name="" id="">不感动，可能是炒作</td> <td> <div class="bar"> <div class="bar_in bar_in4"> </div> </div> </td> <td>8398(2.41%)</td> </tr> </table> <table> <tr> <td colspan="3" class= 'header'>你会愿意为李灵和她的学校做什么？<span>(必选)</span></td> </tr> <tr> <td class="t1"><input type="checkbox" name="" id="" >捐书给他们，让他们有个阅览室</td> <td> <div class="bar"> <div class=" bar_in bar_in5"> </div> </div> </td> <td>163002(45.89%)</td> </tr> <tr> <td><input type="checkbox" name="" id="">捐钱给他们，让他们修缮学校</td> <td> <div class="bar"> <div class="bar_in bar_in6"> </div> </div> </td> <td>52692(15.09%)</td> </tr> <tr> <td><input type="checkbox" name="" id="">向朋友讲述李灵的故事</td> <td> <div class="bar"> <div class="bar_in bar_in7"> </div> </div> </td> <td>118533(33.96%)</td> </tr> <tr> <td><input type="checkbox" name="" id="">什么都不会做</td> <td> <div class="bar"> <div class="bar_in bar_in8"> </div> </div> </td> <td>14881(4.26%)</td> </tr> <tr> <td><input type="checkbox" name="" id="">什么都不会做</td> <td> <div class="bar"> <div class="bar_in bar_in9"> </div> </div> </td> <td>0(0%)</td> </tr> <tr> <td><input type="checkbox" name="" id="">什么都不会做</td> <td> <div class="bar"> <div class="bar_in bar_in10"> </div> </div> </td> <td>0(0%)</td> </tr> </table> </div> <script> var input = document.querySelectorAll('input'); var barin = document.querySelectorAll('.bar_in'); var w = [10,98,30,25,50,22,38,30,34,20,20]; console.log(typeof(5+'%')); console.log(barin); console.log(input); for(var i =0;i<input.length;i++){ input[i].setAttribute('index',i) input[i].onclick = function(){ var index = this.getAttribute('index') barin[index].style.width= w[index]+'%'; } } </script></body></html>

实现效果为：

在这里插入图片描述