时间戳

首页 > 解决方案 > 如何 for 循环找到您要查找的值然后添加 CSS 类？

javascript - 如何 for 循环找到您要查找的值然后添加 CSS 类？

问题描述

I'm trying to:
  1. for循环'槽'colorCard'并找到'div class="card'元素的值：'color: red'。2.然后在这个 'div class="card"'元素上添加'red'类

基本上我的 for 循环功能不起作用，并且在控制台中没有错误消息。

//我的HTML

<body>
    <div class="container" id="all-cards">
    </div>
</body>

//我的 JAVASCRIPT

let **colorCard** = [
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: red'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'}
    ];

const allCards = document.querySelector('#all-cards');

let card = colorCard.map(function(cardData){
    return '**<div class="card">**'  +
    '<span>' + cardData.color  + '<span>' +
            '</div>';
});

allCards.innerHTML = card.join('\n');

//到这里我的代码正在运行

//下面的函数不起作用。

// Loop trough the 'let colorCard' finds the value of "color: red" then add CSS class of "red"

for( i = 0; i < card.length; i++){
    if(card[i] === "color: red"){
        console.log("Found it") 
        //Also I want to add a class on this card object
     }
}

标签： javascriptloops

解决方案

  • 循环allCards.children（返回所有卡节点）然后检查是否innerText匹配"color: red"。
  • 然后使用 . 将类添加到匹配的元素classList.add。

let colorCard=[{color:"color: none"},{color:"color: none"},{color:"color: none"},{color:"color: none"},{color:"color: red"},{color:"color: none"},{color:"color: none"},{color:"color: none"}];

const allCards = document.querySelector('#all-cards');

let card = colorCard.map(function(cardData) {
  return '<div class="card">' +
    '<span>' + cardData.color + '<span>' +
    '</div>';
});

allCards.innerHTML = card.join('\n');

const cards = allCards.children;
for (i = 0; i < cards.length; i++) {
  if (cards[i].innerText.trim() === "color: red") {
    console.log("Found it")
    cards[i].classList.add("blue");
  }
}
.blue {
  background: cyan;
}
<body>
  <div class="container" id="all-cards">
  </div>
</body>

推荐阅读