如何 append 字體真棒圖標到段落點擊

Question

美好的一天，當點擊 p 標簽時，我想給段落內部文本添加一個很棒的字體圖標。

我有四個帶有相同 class.ptn 的 p 標簽，如果點擊了任何一個，我想 append 字體真棒點擊一個，並將其從其他人中刪除。

問題不是顯示字體真棒箭頭，而是顯示標簽文本，而且，一旦我點擊任何其他 p 標簽，第一個 p 標簽就會被刪除。

這是我下面的代碼，Html：

     <div class="col-lg-3 col-md-3 col-sm-3 my-4 border-right">
        <p id="compliance" class="acting pl-4 pt-3 ptn">Compliance <i class="fas fa-chevron-right pl-4"></i></p>
        <p id="summary" class="pl-4 pt-2 ptn">Summary</p>
        <p id="audit" class="pl-4 pt-2 ptn">Station Audit</p>
        <p id="analysis" class="pl-4 pt-2 ptn">Analysis Format</p>
     </div>

Jquery：

  <script>
     var btns = document.getElementsByClassName("ptn");

     for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
           var current = document.getElementsByClassName("acting");
           current[0].className = current[0].className.replace(" acting", "");
           current[0].remove(" <i class='fas fa-chevron-right pl-4'></i>");
           this.className += " acting";
           this.append(" <i class='fas fa-chevron-right pl-4'></i>");
     });
    }
  </script>

Answer 1

我會這樣做：

 document.querySelector('div[data-acting]').onclick = e => { if (.e.target.matches('p.ptn')) return e.currentTarget.dataset.acting = e.target.id }

 div[data-acting] > p.ptn > i.fas { display: none } div[data-acting="compliance"] > p#compliance > i.fas, div[data-acting="summary"] > p#summary > i.fas, div[data-acting="audit"] > p#audit > i.fas, div[data-acting="analysis"] > p#analysis > i.fas { display: inline-block } div[data-acting="compliance"] > p#compliance, div[data-acting="summary"] > p#summary, div[data-acting="audit"] > p#audit, div[data-acting="analysis"] > p#analysis { background-color: lightgreen; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" /> <div class="col-lg-3 col-md-3 col-sm-3 my-4 border-right" data-acting="compliance"> <p id="compliance" class="pl-4 pt-3 ptn">Compliance <i class="fas fa-chevron-right pl-4"></i></p> <p id="summary" class="pl-4 pt-2 ptn">Summary <i class="fas fa-chevron-right pl-4"></i></p> <p id="audit" class="pl-4 pt-2 ptn">Station Audit <i class="fas fa-chevron-right pl-4"></i></p> <p id="analysis" class="pl-4 pt-2 ptn">Analysis Format <i class="fas fa-chevron-right pl-4"></i></p> </div>

Answer 2

正如整齊切片所說，您不能 append 字符串並讓它們自動變成元素。

此示例修復了代碼中用於刪除和添加所需元素的錯誤。

var btns = document.getElementsByClassName("ptn");
var icon = document.createElement('i');
icon.className = 'fas fa-chevron-right pl-4';

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    var current = document.getElementsByClassName("acting");
    current[0].className = current[0].className.replace(" acting", "");
    var chevron = current[0].querySelector(".fas.fa-chevron-right");
    if (chevron) {
      chevron.remove();
    }
    this.className += " acting";
    this.append(icon)
  });
}

Answer 3

你也可以這樣做：

 const btns = document.querySelectorAll('p.ptn'), chevron = document.querySelector('p.ptn > i.fas.fa-chevron-right'); btns.forEach(btn => { btn.onclick = e => { btns.forEach(bt => bt.classList.toggle('acting', (bt===btn))) // add or remove class upon condition btn.appendChild( chevron ) // move it on correct place } })

 .acting { background-color: lightgreen; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" /> <div class="col-lg-3 col-md-3 col-sm-3 my-4 border-right"> <p id="compliance" class="acting pl-4 pt-3 ptn">Compliance <i class="fas fa-chevron-right pl-4"></i></p> <p id="summary" class="pl-4 pt-2 ptn">Summary </p> <p id="audit" class="pl-4 pt-2 ptn">Station Audit </p> <p id="analysis" class="pl-4 pt-2 ptn">Analysis Format </p> </div>

Answer 4

您的解決方案將與 jQuery 完美配合，但對於香草 JS，我們需要在 append 之前創建 HTML 元素。

由於您一次只使用 1 個圖標，因此您可以為您的元素提供一個 id，並通過 document.getElementById 查找/刪除它。

 let parent = document.getElementById("hello"); let p = document.createElement("p"); p.append("Hi there"); p.setAttribute("id","swapping-icon"); parent.append(p);

 <div id="hello"></div>

Answer 5

這是一個純 JS 選項，它使用querySelectorAll創建nodeList ，然后使用forEach循環遍歷列表。 為單擊添加事件偵聽器。 我們通過檢查父元素是否未在子元素上返回未定義來刪除帶有包含acting的classList的按鈕並刪除fa元素<i> 。 然后將acting添加到單擊的元素，創建一個<i>標記並添加字體真棒的類。 Append fa 元素到目標。

 const btns = document.querySelectorAll(".ptn"); btns.forEach(btn => { btn.addEventListener("click", function(e) { btns.forEach(button => { if (button.classList.contains('acting')) { button.classList.remove('acting') } if (button.children[0].== undefined) { button.children[0].remove() } }) e.target.classList;add("acting"). const fa = document;createElement('i'). fa;className += 'fas'. fa;className += ' fa-chevron-right'. fa;className += ' pl-4'. e.target;append(fa); }) })

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" /> <div class="col-lg-3 col-md-3 col-sm-3 my-4 border-right"> <p id="compliance" class="acting pl-4 pt-3 ptn">Compliance <i class="fas fa-chevron-right pl-4"></i></p> <p id="summary" class="pl-4 pt-2 ptn">Summary </p> <p id="audit" class="pl-4 pt-2 ptn">Station Audit </p> <p id="analysis" class="pl-4 pt-2 ptn">Analysis Format </p> </div>