使用 vanilla JS 在文本和數據文本之間動態交換

Question

我正在嘗試使用此代碼在公告欄中動態切換我的文本。

 window.addEventListener('DOMContentLoaded', function(){ let text1 = document.querySelector("text1"); function changeText( ) { if (text1.getAttribute("data-text2") == text1.innerHTML) { text1.innerHTML = text1.getAttribute("data-text1"); } else { text1.setAttribute("data-text1", text1.innerHTML); text1.innerHTML = text1.getAttribute("data-text2"); } window.setTimeout(function() { changeText() }, 3000); } })

 <span class="text1" data-text2="Livraison gratuite partout au Canada.">Le Tero et Tero Plus en vente maintenant.</span>

誰能告訴我我做錯了什么？ 謝謝！

Answer 1

很多時候，尤其是使用innerHTML ，您需要trim()字符串進行比較，例如：

text1.getAttribute("data-text2") == text1.innerHTML.trim()

 window.addEventListener('DOMContentLoaded', function(){ let text1 = document.querySelector("text1"); function changeText( ) { if (text1.getAttribute("data-text2") == text1.innerHTML.trim()) { text1.innerHTML = text1.getAttribute("data-text1"); } else { text1.setAttribute("data-text1", text1.innerHTML.trim()); text1.innerHTML = text1.getAttribute("data-text2"); } window.setTimeout(function() { changeText() }, 3000); } })

 <span class="text1" data-text2="Livraison gratuite partout au Canada.">Le Tero et Tero Plus en vente maintenant.</span>

Answer 2

首先，您沒有正確 select 您的元素。 let text1 = document.querySelector(".text1"); 你應該使用.text而不是text 。

其次，您的代碼中有一些語法錯誤，大括號放置不正確。

 window.addEventListener("DOMContentLoaded", function () { let text1 = document.querySelector(".text1"); function changeText() { if (text1.getAttribute("data-text2") == text1.innerHTML) { text1.innerHTML = text1.getAttribute("data-text1"); } else { text1.setAttribute("data-text1", text1.innerHTML); text1.innerHTML = text1.getAttribute("data-text2"); } } window.setTimeout(function () { changeText(); }, 3000); });

 <span class="text1" data-text2="Livraison gratuite partout au Canada.">Le Tero et Tero Plus en vente maintenant.</span>