我在Dom中有个问题。我想在alreadyRead
(布尔值)的基础上更改访问过的链接的颜色。我是这个领域的新手,所以如果我做错了什么,请原谅我。这是我的代码片段。提前感谢!
var books = [
{
title: 'The Design of EveryDay Things',
author: 'Don Norman',
alreadyRead: false
},
{
title: 'The Most Human Human',
author: 'Brian Christian',
alreadyRead: true
}
];
var appHandle = document.getElementById('app');
var ulTag = document.createElement('ul')
books.forEach(book =>{
if(book.alreadyRead === true){
document.linkcolor="green"
} else{
document.linkcolor ="red"
}
var liTag = document.createElement('li');
var navList =document.createTextNode(`${book.title} by ${ book.author}`)
var aTag = document.createElement('a')
aTag.setAttribute('href','#');
aTag.appendChild(navList)
liTag.appendChild(aTag);
ulTag.appendChild(liTag);
})
appHandle.appendChild(ulTag)
发布于 2018-10-07 02:59:45
在最简单的情况下,您可以使用下面这行代码实现您似乎想要的结果:
aTag.classList.toggle('alreadyRead', book.alreadyRead);
根据类名后面的开关,该行使用Element.classList
API在相关的aTag
元素节点上切换alreadyRead
类名。如果开关返回true
,则添加类(如果不存在),或者如果开关返回false
,则删除类名(如果存在)。
var books = [{
title: 'The Design of EveryDay Things',
author: 'Don Norman',
alreadyRead: false
},
{
title: 'The Most Human Human',
author: 'Brian Christian',
alreadyRead: true
}
];
var appHandle = document.getElementById('app');
var ulTag = document.createElement('ul')
books.forEach(book => {
var liTag = document.createElement('li');
var navList = document.createTextNode(`${book.title} by ${ book.author}`);
var aTag = document.createElement('a')
aTag.setAttribute('href', '#');
aTag.appendChild(navList)
liTag.appendChild(aTag);
ulTag.appendChild(liTag);
aTag.classList.toggle('alreadyRead', book.alreadyRead);
})
appHandle.appendChild(ulTag)
.alreadyRead {
color: limegreen;
}
<div id="app"></div>
参考文献:
https://stackoverflow.com/questions/52682290
复制相似问题