如何禁用或啟用 href 鏈接並更改其內容？

Question

我的代碼中有一個錯誤需要修復

  if (!creatorUrl) {
        creatorUrl = '#';
      }

基本上上面的代碼所做的是，它檢查創建者是否有一個 URL，我可以將用戶重定向到該 URL，否則我不想做任何事情。

  <p class="vocab paragraph inherit-colored info__content info__content-creator">
                <a href="creator_url">Creator Name</a>
              </p>

這是我正在修改的標簽。 我希望預期的行為是這樣的，當 creatorUrl 不存在時，鏈接根本不應該顯示並且創建者名稱應該是純文本。我該怎么做？

Answer 1

在服務器端，不顯示鏈接將是一個明顯的地方

EJS

<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <% if (creatorUrl) { %>
    <a href="<%= creatorUrl %>">Creator Name</a>
  <% } else { %>
    Creator Name
  <% } %>
</p>

在客戶端，您可以執行此操作以用它們的 textContent 替換空鏈接

 window.addEventListener("load",function() { [...document.querySelectorAll(".info__content-creator a[href^='#']")].forEach(lnk => lnk.parentNode.replaceChild(document.createTextNode(lnk.textContent), lnk)); })

 <p class="vocab paragraph inherit-colored info__content info__content-creator"> <a href="#">Creator Name</a> </p> <p class="vocab paragraph inherit-colored info__content info__content-creator"> <a href="createorpage.html">Creator Name</a> </p>

Answer 2

var a = document.getElementById('yourlinkId'); //給你的錨標簽一個 Id 或者選擇你想要的並將它存儲在一個變量中。

 if(!creatorUrl){
    a.href = '#';
    }
  else{
  a.href = "somelink url"
 }