提取css并与数据属性匹配。
提取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>尝试编写一个脚本来匹配每个匹配的'data- class‘类中的类，从而向元素中添加一个“活动”类；
做这件事最好的方法是什么？
因此，结果应该是：
<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>回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-23 20:24:16
使用 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迭代NodeList#forEach，并将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>
Stack Overflow用户
发布于 2017-09-23 20:08:02
您可以循环每个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>
Stack Overflow用户
发布于 2017-09-23 20:08:28
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46383805
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号