javascript - 更改元素 :after content depending on textContent of seperate element using Vanilla JavaScript

Question

我想将单独的 span 元素的 textContent 继承到 :after 样式的 content使用 Vanilla JavaScript。

如下面的 HTML 所示，带有 className span-class 的 span 是我要提取 的元素文本内容 来自。 className sample 的 div 是 div className parent < em>random(包含 span-class)，以及我想为其应用 :after 样式的 p 元素, 具有继承的 content:"";.

这些元素在整个网站中重复使用相同的 className，因此需要一个数组，如下面的 Desired Outcome 所示。

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-text 的 textContent 的末尾，尽管一个解决方案，不是一个选项。

提前感谢任何解决方案!

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>