如何在HTML鏈接中添加通知文本并在單擊時洗掉？

我正在創建一個網站，該網站每天都有帶有 URL 鏈接的新聞更新。我需要添加一個新的！鏈接頂部的文本，一旦用戶訪問了它，就需要洗掉文本。我到處搜索了這個功能的名稱，并且還通過了 CSS 中的錨標記屬性，即 a:visited {}，但它只是 CSS，我該如何用于上述場景？

此外，如果有任何其他方法可以處理新添加的鏈接，并且在一定時間后，NEW！文字不見了，請告訴我，我在網上找不到任何資源。謝謝。

uj5u.com熱心網友回復：

一旦用戶閱讀了新聞，您需要一個存盤文章 ID 的地方。localStorage 是一個不錯的選擇。但是 cookie 也可以。

在您的文章串列中，您需要每篇文章的文章 ID。例如，這data- Attribute是完美的。當您調出一個頁面時，系統將

1. 訪問過的頁面是從 localStoare 中獲取的，并且
2. 新聞串列已收集
3. 然后迭代新聞串列并比較 allreadyRead 陣列中的文章 ID。

這是一個例子。我已經跳過了 localStorage 部分并且已經有了 AllreadList 陣列。

const allreadyVisited = ["101","102"];

const newsList = document.querySelectorAll('p');
newsList.forEach((el) => {
  const newsID = el.getAttribute('data-id');  
  if (allreadyVisited.includes(newsID)) {    
    const badge = document.createElement('span');
    badge.innerHTML = ' *NEW*';
    el.append(badge)    
  }
})

<div id="list">
  <p class="news" data-id="101">News One</p>
  <p class="news" data-id="102">News Two</p>
  <p class="news" data-id="103">News Three</p>
</div>

uj5u.com熱心網友回復：

const link = document.querySelector('a').addEventListener('click', e => {
        e.preventDefault()
        // Chnage link class and color//
        if (e.target.classList.contains('clicklink')){
            //Get the text and remove it
        document.querySelector('p').remove();
        
        }
            e.target.classList.add('visited')
        
})

uj5u.com熱心網友回復：

Reusing this css answer: Badges For Buttons using html and CSS

您可以使用本地存盤

const visited = ["- Visit my new blog post #3 -"]; // remove and uncomment next two lines
// const saved = localStorage.getItem("visited");
// const visited = saved ? JSON.parse(saved) : []; // restore what was visited here.
document.querySelectorAll("a.button").forEach(a => {
  if (visited.includes(a.textContent)) a.classList.remove("badge")
})
document.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("badge")) {
    const text = tgt.textContent;
    if (!visited.includes(text)) {
      visited.push(text);
      tgt.classList.remove("badge")
      // localStorage.setItem("visited",JSON.stringify(visited)); // uncomment
    }
  }
})

a { text-decoration:none }

.button {
    background: linear-gradient(to bottom, rgba(37,130,188,1) 0%,rgba(41,137,216,1) 32%,rgba(41,137,216,1) 42%,rgba(175,224,234,1) 100%);
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: none;
    margin-top: 40px;
    margin-left: 40px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.button.badge:before {
    content: "!";
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: block;
    border-radius: 50%;
    background: rgb(67, 151, 232);
    border: 1px solid #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: #FFF;
    position: absolute;
    top: -7px;
    left: -7px;
}

.button.badge.top-right:before {
    left: auto;
    right: -7px;
}

.button.badge.bottom-right:before {
    left: auto;
    top: auto;
    right: -7px;
    bottom: -7px;
}

.button.badge.bottom-left:before {
    top: auto;
    bottom: -7px;
}

<a href="#" class="button badge">- Visit my new blog post #1 - </a><hr/>
<a href="#" class="button badge top-right">- Visit my new blog post #2 - </a><hr/>
<a href="#" class="button badge bottom-right">- Visit my new blog post #3 -</a><hr/>
<a href="#" class="button badge bottom-left">- Visit my new blog post #4  -</a>

標籤：javascript html css

上一篇：如何將單選按鈕值設定為選中或未選中的情況

下一篇：事件不會在第一次點擊父孩子時觸發