Javascript 如何使用for循环找到要查找的值，然后添加CSS类？ for loop“通过'colorCard'查找'div class=“card'元素，其值为：'color:red'。 2.然后在此'div class=“card”元素上添加'red'类_Javascript_Loops

Javascript 如何使用for循环找到要查找的值，然后添加CSS类？ for loop“通过'colorCard'查找'div class=“card'元素，其值为：'color:red'。 2.然后在此'div class=“card”元素上添加'red'类

javascript loops

Javascript 如何使用for循环找到要查找的值，然后添加CSS类？ for loop“通过'colorCard'查找'div class=“card'元素，其值为：'color:red'。 2.然后在此'div class=“card”元素上添加'red'类,javascript,loops,Javascript,Loops,基本上，我的for loop功能不工作，控制台中没有错误消息 //我的HTML I'm trying to: //我的JAVASCRIPT <body> <div class="container" id="all-cards"> </div> </body> 让**色卡**=[ {color:'color:none'}， {color:'color:none'}， {color:'

基本上，我的for loop功能不工作，控制台中没有错误消息

//我的HTML

I'm trying to:

//我的JAVASCRIPT

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

让**色卡**=[
{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（“#所有卡片”）；
let card=colorCard.map（函数（cardData）{
返回“**”+
''+cardData.color+''+
'';
});
allCards.innerHTML=card.join（'\n'）；

//到目前为止，我的代码正在运行

//下面的函数不工作

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');

//通过“let colorCard”循环找到“color:red”的值，然后添加“red”的CSS类
对于（i=0；i

以下是如何通过文本找到它

const彩色卡=[
{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（“#所有卡片”）；
allCards.innerHTML=彩色卡
.map（cardData=>`${cardData.color}`）
.加入（“”）；
[…document.queryselectoral（“.card span”）]
.filter（ele=>ele.textContent==“color:red”）//范围包含的任何文本
.forEach（ele=>ele.classList.add（“黄色”）；

.red{color:red；}
.yellow{背景色：黄色；}

以下是如何通过文本找到它

const彩色卡=[
{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（“#所有卡片”）；
allCards.innerHTML=彩色卡
.map（cardData=>`${cardData.color}`）
.加入（“”）；
[…document.queryselectoral（“.card span”）]
.filter（ele=>ele.textContent==“color:red”）//范围包含的任何文本
.forEach（ele=>ele.classList.add（“黄色”）；

.red{color:red；}
.yellow{背景色：黄色；}

循环遍历

所有cards.children

（返回所有卡片节点），然后检查

内部文本是否与的“颜色：红色”
匹配


然后使用类列表将类添加到匹配的元素中。添加



let colorCard=[{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（“#所有卡片”）；
let card=colorCard.map（函数（cardData）{
返回“”+
''+cardData.color+''+
'';
});
allCards.innerHTML=card.join（'\n'）；
const cards=allCards.children；
对于（i=0；i

.blue{
背景：青色；
}


循环遍历所有cards.children
（返回所有卡片节点），然后检查内部文本是否与的“颜色：红色”
匹配

然后使用类列表将类添加到匹配的元素中。添加



let colorCard=[{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（“#所有卡片”）；
let card=colorCard.map（函数（cardData）{
返回“”+
''+cardData.color+''+
'';
});
allCards.innerHTML=card.join（'\n'）；
const cards=allCards.children；
对于（i=0；i

.blue{
背景：青色；
}

not workin:Uncaught SyntaxError:Identifier'card'已经声明了我重命名了它--Uncaught ReferenceError:cardData没有定义哦，哇，太好了，代码也少了。你能解释一下你在这里做了什么，让我能更深入地理解吗？你在哪里声明要查找“color:red”的值“这正是我要找的！mplungjan感谢您的时间和解释。不工作：未编码的语法错误：标识符“card”已被声明我已将其重命名--未编码的引用错误：cardData未定义哇，太好了，代码也少了。你能解释一下你在这里做了什么，让我能更深入地理解吗？你在哪里声明要寻找“颜色：红色”的值？这正是我要找的！谢谢你的时间和解释，非常感谢！你能解释一下你在这里做了什么，这样我就可以用谷歌搜索它来了解更多。allCards
是包含所有卡片元素的容器，你可以使用获取它的所有子节点。children
循环这些子节点，使用innerText
获取这些节点的文本，然后将其与所需文本。你可以在谷歌上搜索关于儿童
，内部文本
和类列表@PaulCThank非常感谢你的解释因为一旦我的剧本成功了
// 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
     }
}