什么是排他思想？

排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。

排他思想的优势

排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。

实现排他思想的步骤

为全部元素设置一般效果
为特定元素设置特定效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标经过对应方块变红</title><style>ul{margin: 0px;padding: 0px;list-style: none;width:1000px;height:800px;background-color: #ccc;}li{float: left;width:200px;height: 200px;text-align: center;line-height: 200px;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul><script>var lis=document.getElementsByTagName("li");for(let i=0;i<lis.length;i++){lis[i].onmouseenter=function(){for(let j=0;j<lis.length;j++){lis[j].style.backgroundColor="#ccc";}lis[i].style.backgroundColor="red";}}</script></body>
</html>

实现同一效果的另一种方式(不使用排他思想)

我们的操作改变某一元素样式或效果时，我们可以为该元素做标记(以某种方式直接访问)，当另一元素发生同样改变时，我们只需要针对上一个不同于一般样式的元素进行修改，再修改下一个进行了该操作的元素的样式或效果，就可以实现不依靠排他思想的同样效果

实现步骤

操作某一元素时标记(以便后续直接访问)，并修改样式
再次操作时修改被标记的元素的样式到一般样式，为下一个特定元素标记并设置特殊样式

这里的两个步骤可以统合到一个函数里面。个人感觉比排他思想更加好用。

以下为修改后排他思想的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标经过对应方块变红</title><style>ul{margin: 0px;padding: 0px;list-style: none;width:1000px;height:800px;background-color: #ccc;}li{float: left;width:200px;height: 200px;text-align: center;line-height: 200px;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul><script>var lis=document.getElementsByTagName("li");var count=null;for(let i=0;i<lis.length;i++){(function(j){lis[j].onmouseenter=function(){if(count!=null){lis[count].style.backgroundColor="#ccc";}lis[j].style.backgroundColor="red";count=j;}}(i));}</script></body>
</html>

笔者认为第二种方式实现更加简单。

以上就是笔者的学习分享，如有不同观点或看法，欢迎评论区留言。

JavaScript排他思想相关推荐

android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
JavaScript 排他思想
排他思想排他思想案例分析排他思想如果有同一组数元素我们想要某一个元素实现某种样式这时候需要用到循环的排他思想算法 1 所有元素全部清楚样式 2 给当前的元素设置样式 3 注意顺序先清楚 ...
JavaScript之排他思想详述
在前面的博客中,小熊更新了相关操作元素的方法,但是如果有同一组元素,我们想要某一个元素实现某种样式,这时需要怎么办呢? 这里就要用到循环的排他思想. 排他思想的算法就是: 排除掉其他的(包括自己),然 ...
JavaScript【事件委托实现排他思想】
事件委托实现排他思想: <style>ul {background-color: #ccc;}.active {color: red;}</style> </head&g ...
jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
什么是排他思想算法？（源码解析）
排他思想算法 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
编程思维---排他思想
排他思想:就是排除掉其他的(包括自己),然后再给自己设置想要实现的效果.总而言之,排他思想的实现步骤就是所有元素全部清除再设置当前元素. 大白话---简单总结:干掉兄弟,复活自己使用场景:1.Tab ...
DOM系列之排他思想
文章の目录 1.什么是排他思想 2.示例写在最后 1.什么是排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法所有元素全部清除样式(干掉其他人) 给当前元素设 ...
jQuery的排他思想
因为jQuery具备隐式迭代,所以在写排他思想的时候不需要循环遍历,直接用下面这个就能实现. <html><button>变色</button><butto ...

JavaScript排他思想