提取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和匹配數據屬性

回答

相關問題