Question

我有一个网页，我在其中添加了突出显示文本特定部分的可能性。每当我选择一些文本并按ctrl + c时，所选文本将插入一个范围并突出显示。当元素突出显示时，HTML看起来就像那样。

  <div id ="text">
      <p>
    Vestibulum ante ipsum primis in faucibus orci "<span class="highlight" id="0">luctus</span>
 "et ultrices posuere cubilia Curae;" </p>

我尝试创建一个功能，以便在单击跨度时更改突出显示的颜色。

为此，我创建了一个下面的函数，每次突出显示一个新元素时都会调用它。它选择文本中的所有跨距，假设通过其ID来选择相关跨度以更改其类，并添加事件侦听器。

function eventHighlighted() {

  //select all spans within the text into an HTML collection.
  let textToAnnotate = document.querySelector('#text');
  let spansExisting = textToAnnotate.querySelectorAll('span');    

 // function to change the highlighted colour
  function changeColour () {
    let selectedText = document.getElementsByClassName("highlight")[this.id];
    selectedText.className = "highlight-clicked";
    }

// add eventListener to all spans.
  for (var i = 0; i < spansExisting.length; i++) {
     var existingSpan = spansExisting[i];
     existingSpan.addEventListener("click", changeColour);
     }
  }

每次突出显示新的文本时，都会调用此函数。（我认为这不是非常有效的记忆，因为它可能会在一些不再需要它的跨度上添加不必要的事件监听器。）

我遇到的问题是它可以很好地突出显示的第一个元素。每当我点击这个突出显示的文本时，突出显示会改变颜色。

但是，当我突出显示第二位文本时，例如使用此示例

 <div id ="text">
          <p>
        Vestibulum ante ipsum primis in faucibus orci "<span class="highlight" id="0">luctus</span>
     "et ultrices" <span class="highlight" id="1">posuere cubilia</span> " Curae;" </p>

如果我点击第一个跨度（luctus），它将触发其上的类更改，但也会触发下面的第二个跨度。但是，当我选择第二个时，它将按预期工作，并且仅在第二个跨度上触发类更改。

我无法弄清楚原因。我收集在第一个跨度上触发的函数实际上指示他更改HTML集合中所有跨度的类。我不明白为什么它没有指示他专门为他做这件事。

谢谢！

Answer 1

您不需要span标记中的额外属性。看看我的解决方案。希望这会有所帮助。

＆＃13;

function initHighlights() {
  var highlights = document.querySelectorAll('.highlight');

  for (var i = 0; i < highlights.length; i++) {
    highlights[i].onclick = function() {
      // this - refers to span HTMLElement
      this.classList.toggle("highlight-clicked");
    };
  }
}

initHighlights();

＆＃13;

.highlight {
  background: lightgrey;
  cursor: pointer;
  user-select: none;
}

.highlight-clicked {
  background: yellow;
}

＆＃13;

<div id ="text">
    <p>Vestibulum ante ipsum primis in faucibus orci "<span class="highlight">luctus</span>"et ultrices <span class="highlight">posuere cubilia</span> Curae;"</p>
</div>

＆＃13;

addeventlistener到动态生成的元素会触发

1 个答案: