Javascript - 在跨度范围之上添加一个新的 DIV

Question

我在codesandbox上有以下代码： https://codesandbox.io/s/highlighter-cv2kv?file=/src/index.js

我对短语中的每个单词都有一堆跨度。 我希望能够根据开始时间和结束时间创建亮点（每个跨度在数据集中都有这些详细信息）。 需要在相应的跨度上方放置高亮显示。

到目前为止，我已经能够突出显示起始词和停止词，但我需要突出显示该间隔之间的每个词。

当前state：

所需 state：

关于如何以最有效的方式执行此操作的任何想法？

Answer 1

我有一个我的想法给你 less js more css，你只需要切换 class playing并突出显示这些词：

    body {
  font-family: sans-serif;
}

.will-play {
  position: inherit;
  z-index: 1;
  position: relative;
}
.will-play.playing::after {
  z-index: 200;
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;
  background-color: yellow;
  opacity: 0.5;
  content: "";
}

我忘记了JS：

let ranges = { start: "80.9", end: "87.48" };


let spans = [...document.querySelectorAll("span.will-play")];

spans.map((item) => {
  if(item.dataset.start>=ranges.start && item.dataset.end<=ranges.end){
    item.classList.add('playing')
  }
});

Answer 2

使用dataset和querySelectorAll

工作演示

for (let range of ranges) {
  parent.querySelectorAll('.will-play').forEach (span => {
    if (span.dataset.start < range.start || span.dataset.end > range.end) {
      return;
    }

    let highLightParent = document.createElement("div");    
    let highlight = document.createElement("div");
    let pos = getPos(parent, span);
    highlight.style.cssText = `position: absolute; top: ${pos.top}px; left: ${pos.left}px; width: ${span.offsetWidth}px; height: ${span.offsetHeight}px; background-color: yellow; opacity: 0.5; z-index: 1`;

    highLightParent.appendChild(highlight);    
    parent.appendChild(highLightParent);
  });
}