Estoy creando un sitio web que tiene actualizaciones de noticias diarias con enlaces URL. ¡Necesito agregar un NUEVO! texto en la parte superior del enlace y una vez que el usuario lo haya visitado, debe eliminar el texto. Lo busqué en todas partes, cómo se llama esta función y también revisé el atributo de etiqueta de anclaje en CSS, es decir, a: visité {}, pero es solo CSS, ¿cómo puedo usarlo para el escenario anterior?
Además, si hay alguna otra forma de lidiar con los enlaces recién agregados y después de cierto tiempo, ¡NUEVO! el texto no está, por favor hágamelo saber, no puedo encontrar ningún recurso en línea. Gracias.
Necesita un lugar donde almacene las identificaciones de los artículos una vez que un usuario haya leído las noticias. El localStorage es una buena opción. Pero las cookies también funcionarían.
En su lista de artículos, necesita el ID de artículo para cada artículo. Por ejemplo, el data- Attribute es perfecto para esto. Cuando llame a una página, el sistema entonces
Aquí hay un ejemplo. Me salté la parte localStorage y ya tengo la matriz 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>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') })Reutilizando esta respuesta css: insignias para botones usando html y CSS
Puedes usar almacenamiento local
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>