提取css并匹配数据属性答案

【问题标题】：Extract css and match with data-attribute提取css并匹配数据属性
【发布时间】：2017-09-23 20:05:24
【问题描述】：

我有以下场景：

<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>

【问题讨论】：

标签： javascript jquery arrays

【解决方案1】：

使用 jQuery

从正文中获取类，拆分，映射到数据属性字符串数组，然后连接。将 active 类添加到所有选定的元素：

var classNames = $('body')
  .attr("class")
  .split(' ')
  .map(function(c) {
    return '[data-class="' +  c + '"]';
  })
  .join(',');
  
$(classNames).addClass('active');

console.log(classNames);

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

没有 jQuery：

从正文中获取classList，并将其转换为字符串查询，方法是使用Array#slice 将classList 转换为数组，将类映射到数据属性字符串，并用逗号连接。然后使用Document#querySelectorAll 获取nodeList。使用NodeList#forEach 迭代nodeList，并将active 类添加到每个节点。

var classNames = [].slice.call(document.querySelector('body').classList, 0).map(function(c) {
  return '[data-class="' +  c + '"]';
}).join(',');

document.querySelectorAll(classNames).forEach(function(node) {
  node.classList.add('active');
});

.active {
  color: red;
}

<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>

【讨论】：

谢谢 Ori，我用了你的，因为它更清晰易用。顺便说一句，如果我想扩展它，并检查以删除那些与数据类不匹配的“活动”类，我在哪里添加 if 语句？
您可以在使用我的代码设置“.active”类之前执行旧的$('.active').removeClass('active')。或者使用@NenadVracar 的解决方案，其中包含一个if 子句，向其中添加一个else 子句。

【解决方案2】：

您可以循环每个a 元素，然后使用hasClass() 来检查body 是否具有相同的类以及是否使用addClass()

$('a').each(function() {
  if ($('body').hasClass($(this).data('class'))) {
    $(this).addClass('active')
  }
})

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

【讨论】：

【解决方案3】：

var bodyClass=$("div").attr("class").split(" ");
$.map( bodyClass, function( val, i ) {
    $("a[data-class='"+val+"']").addClass('active');
});

.active{
 color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div 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>  
</div>

【讨论】：

通过数组列表过滤而不是 $.each 会更容易