如何在Java腳本dom中更改已訪問錨鏈接的顏色

Question

我在大教堂遇到問題。 我想基於已經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)

Answer 1

簡單地說，您可以使用以下代碼實現您想要的目標：

aTag.classList.toggle('alreadyRead', book.alreadyRead);

此行使用Element.classList API來切換alreadyRead有關上類名aTag元素節點，基於下面的類名的開關。 如果開關返回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> 

JS小提琴演示 。

參考文獻：

• Element.classList 。