如何在单击的段落中添加字体令人敬畏的图标
如何在单击的段落中添加字体令人敬畏的图标
提问于 2021-03-12 00:17:13
您好，当点击p标签时，我想在段落内部文本中添加一个字体令人敬畏的图标。
我有四个带有相同类.ptn的p标记，如果有点击，我想将这个字体添加到点击的字体中，并从其他人中删除它。
问题不是显示字体可怕的箭头，而是显示标记文本，而且，当我单击其他任何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>回答 5
Stack Overflow用户
回答已采纳
发布于 2021-03-12 01:08:05
下面是一个纯JS选项，它使用querySelectorAll创建nodeList，然后使用forEach循环迭代列表。为单击添加事件侦听器。我们使用包含classList的acting删除按钮，并通过检查父元素是否在子元素上返回未定义的来删除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>
Stack Overflow用户
发布于 2021-03-12 00:45:34
我会这样做：
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>
Stack Overflow用户
发布于 2021-03-12 00:46:08
正如整洁切片所指出的那样，您不能追加字符串并让它们自动转换为元素。
此示例修复代码中用于删除和添加所需元素的bug。
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)
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66592417
复制相关文章
相似问题
腾讯云开发者
