如何添加FontAwesome图标的段落点击

Question

您好，当点击p标签时，我想在段落内部文本中添加一个字体很棒的图标。

我有四个相同类的p标签。ptn，如果点击了任何一个，我想把这个字体添加到点击的那个，然后从其他标签中删除。

问题是，它没有显示字体可怕的箭头，而是显示标签文本，而且，一旦我点击任何其他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

正如neatlysliced所说，您不能附加字符串并将其自动转换为元素。

此示例修复了代码中用于删除和添加所需元素的错误。

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 2

我会这样做：

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 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

这里有一个纯JS选项，它使用querySelectorAll创建nodeList，然后使用forEach循环来迭代列表。为单击添加事件侦听器。我们移除包含acting的classList的按钮，并通过检查父元素是否在子元素上未返回undefined来移除fa元素<i>。然后将类acting添加到单击的元素中，创建一个<i>标记，并添加字体真棒的类。将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>

Answer 5

您的解决方案与jQuery配合使用会很好，但与普通JS配合使用时，我们需要在附加HTML元素之前创建它们。

由于您一次只使用一个图标，因此可以为元素指定一个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>