提取CSS和匹配数据属性

我有以下情形：提取CSS和匹配数据属性

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

来源

2017-09-23 webkitfanz

使用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＃切片的数组，将这些类映射到数据属性字符串并加入逗号。然后使用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>

来源

2017-09-23 20:24:16

谢谢Ori，我用你的一个，因为它更清楚使用。顺便说一句，如果我想扩展它，并做一个检查来删除那些不匹配数据类的“活动”类，我在哪里添加if语句？ – webkitfanz

在使用我的代码设置'.active'类之前，您可以执行旧的$（'.active'）。removeClass（'active'）'。或者使用@NenadVracar的解决方案，该解决方案包含一个'if'子句，在其中添加一个'else'子句。 –

你也可以遍历每个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>

来源

2017-09-23 20:08:02

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>

来源

2017-09-23 20:08:28

将不会通过一个数组列表，而不是做$。每个 – webkitfanz

是容易过滤。我用'$ .map'改变了代码。这是更快 –

提取CSS和匹配数据属性

回答

相关问题