Javascript 提取css并与数据属性匹配_Javascript_Jquery_Arrays

Javascript 提取css并与数据属性匹配

javascript jquery arrays

Javascript 提取css并与数据属性匹配,javascript,jquery,arrays,Javascript,Jquery,Arrays,我有以下情况： <body class="theme-blue nav-black"> <a href="#" data-class="theme-blue">Blue theme </a> <a href="#" data-class="nav-black">Dark Nav</a> <a href="#" data-class="nav-white">Light Nav</a> </body

我有以下情况：

<body class="theme-blue nav-black">
  <a href="#" data-class="theme-blue">Blue theme </a>
  <a href="#" data-class="nav-black">Dark Nav</a>
  <a href="#" data-class="nav-white">Light Nav</a>
</body>

试图编写一个脚本来匹配每个匹配的“数据类”中的类，并为每个匹配的“数据类”添加一个“活动”类到元素中

做这件事最好的方法是什么

因此，结果应该如下所示：

<body class="theme-blue nav-black">
  <a href="#" data-class="theme-blue" class="active">Blue theme </a>
  <a href="#" data-class="nav-black" class="active">Dark Nav</a>
  <a href="#" data-class="nav-white">Light Nav</a>
</body>

您可以循环每个

元素，然后使用

hasClass（）

检查

body

是否具有相同的类，以及它是否使用

addClass（）

$（'a'）。每个（函数（）{
if（$（'body'）.hasClass（$（this）.data（'class'））{
$（this.addClass（'active'））
}
})

.active{
背景：红色；
}

var bodyClass=$（“div”）.attr（“class”）.split（“”）；
$.map（体类，函数（val，i）{
$（“a[数据类='“+val+']”）addClass（'active'）；
});
.active{
颜色：红色；
}
使用jQuery
从主体中获取类，拆分，映射到数据属性字符串数组，然后联接。将类活动
添加到所有选定元素：

var classNames=$（'body'）
.attr（“类”）
.拆分（“”）
.map（功能（c）{
返回“[data class=“”+c+”]”；
})
。加入（‘，’）；
$（classNames）.addClass（'active'）；
log（类名）
.active{
颜色：红色；
}

通过数组列表进行筛选比使用$更容易。我使用了你的数组列表，因为它更易于使用。顺便说一句，如果我想扩展它，并对那些与数据类不匹配的类进行检查以删除“active”类，那么我应该在哪里添加if语句？在用我的代码设置“.active”类之前，您可以执行旧的$（'.active'）.removeClass（'active'）
。或者使用@NenadVracar的解决方案，该解决方案包含一个if
子句，方法是向其添加一个else
子句。