更改元素:在内容之后取决于文本使用香草JavaScript的单独元素的内容

Question

我想使用Vanilla JavaScript继承一个单独的span元素的textContent，以:after样式的content。

如下面的 HTML 所示，带有span-classclassNamespan是我想从中提取textContent的元素。带有className样本的div 是具有className随机(其中包含跨度类)的div的parent，也是我想应用:after样式的p元素，具有继承的content:" ";。

这些元素在整个网站中以相同的className重复，因此需要一个数组，如下面的期望结果所示。

.HTML

<div class="sample">
<div class="random">
<span class="span-class">example</span>
</div>
<p class="p-text">some random text, some random text, some random text</p>
</div>

<div class="sample">
<div class="random">
<span class="span-class">example2</span>
</div>
<p class="p-text">some random text, some random text, some random text</p>
</div>

.CSS

.p-text:after{
content: "text I want to be dynamic";
}

期望的结果：

注意：我知道pText:after.content不起作用，但它最能描述我想要实现的目标

var sample = Array.from(document.querySelectorAll(".sample"));
sample.forEach(function(smpl) {
var textContent = smpl.querySelector(".span-class").textContent;
var pText = smpl.querySelector(".p-text");
if (textContent === "example") {
pText:after.content = "example";
} else if (textContent === "example2") {
pText:after.content = "example2";
}
})

另请注意：创建另一个span元素并将其放置在.p-texttextContent的末尾，虽然是一种解决方案，但不是一种选择。

提前感谢您的任何解决方案！

Answer 1

你可以获取带有此类的所有元素p-text并从这里获取它的父节点并使用 querySelector 获取特定的子节点。然后获取它的内容并更新.p-text元素的文本内容

document.querySelectorAll('.p-text').forEach(function(item) {
let m = item.parentNode.querySelector('.span-class').textContent;
let ItemContent = item.textContent + ' ' + m;
item.innerHTML = ItemContent
})

<div class="sample">
<div class="random">
<span class="span-class">example</span>
</div>
<p class="p-text">some random text, some random text, some random text</p>
</div>

Answer 2

您还可以在现代浏览器中使用 css 变量。

.p-text:after{
content: var(--p-text-content, "");
color: green;
}

喜欢这个：

var sample = Array.from(document.querySelectorAll(".sample"));
sample.forEach(function(smpl) {
	var textContent = smpl.querySelector(".span-class").textContent;
	var pText = smpl.querySelector(".p-text");
	pText.style.setProperty("--p-text-content", `'${textContent}'`);
})

.p-text:after{
content: var(--p-text-content, "");
color: green;
}

<div class="sample">
<div class="random">
<span class="span-class">example</span>
</div>
<p class="p-text">some random text, some random text, some random text</p>
</div>

Answer 3

HTMLBefore

<div class="sample">
<div class="random">
<span class="span-class">example</span>
</div>
<p class="p-text">some random text, some random text, some random text</p>
</div>
<div class="sample">
<div class="random">
<span class="span-class">example2</span>
</div>
<p class="p-text">some random text, some random text, some random text</p>
</div>

.CSS

.p-text:after{
content: attr(data-content);
}

p元素中的定位属性data-content允许使用el.dataset.content = "";进行操作，如下所示使用 JavaScript。

请注意，如果一个元素还没有包含属性data-content，下面的JavaScript将自动创建一个并相应地实现所需的更改。

JavaScript

var sample = Array.from(document.querySelectorAll(".sample"));
sample.forEach(function(smpl) {
var textContent = smpl.querySelector(".span-class").textContent;
var pText = smpl.querySelector(".p-text");
if (textContent === "example") {
pText.dataset.content = "example";
} else if (textContent === "example2") {
pText.dataset.content = "example2";
}
})

JS/CSS 之后的结果

<div class="sample">
<div class="random">
<span class="span-class">example</span>
</div>
<p class="p-text" data-content="example">
some random text, some random text, some random text.
::after
</p>
</div>
<div class="sample">
<div class="random">
<span class="span-class">example2</span>
</div>
<p class="p-text" data-content="example2">
some random text, some random text, some random text.
::after
</p>
</div>