如何为每组单词加亮一个单词？

Question

情况：我有给学生的文字。文本中的三个位置分别位于不同的位置。始终，当三个单词出现在文本中时，必须通过单击将其中一个单词突出显示。

以下代码允许我这样做：

var words = $(document.getElementById("test1")).first().text().split(/\s+/);
var text = words.join("</span> <span>");
$(document.getElementById("test1")).html("<span>" + text + "</span>");
let highlighted;
$("span").on("click", function() {
  $(highlighted).css("background-color", "");
  $(this).css("background-color", "CornflowerBlue ");
  highlighted = this;

var wort = highlighted.innerHTML


  input1.value = wort;
});

edit html：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="font-size: 20px">
lots of text... <b><div id="test1" >[word1, word2, word3]</div></b> more text. <b><div id="test2" >[word1, word2, word3]</div></b>

问题：第一组单词不是上面的代码有问题。对于第二组单词，我将使用ID为“ test2”的相同代码。当我单击第二组的单词时，第一组的标记也会消失。

问题：如何在不删除先前ID的标记的情况下将代码用于多ID？（每组单词我都有一个标记）

Answer 1

我在VanillaJS中为您提供了此解决方案

"use strict";
console.clear();

void function(d,w) {
  const className = 'click-react';
  const highlightClassName = 'click-highlight'
  
  Array.from(d.getElementsByClassName(className)).forEach(el => {
    const words = el.innerText.split(/\s+/);
    const wordsMapped = words.map(i => `<span data-click>${i}</span>`)
    el.innerHTML = wordsMapped.join(' ');
  })
  
  d.addEventListener('click', e => {
    if (!e.target.hasAttribute('data-click')) {return false}
    if (!e.target.closest(`.${className}`)) {return false}
    
    Array.from(e.target.closest(`.${className}`).getElementsByClassName(highlightClassName))
      .forEach(el => el.classList.remove(highlightClassName))
    e.target.classList.add(highlightClassName)  
  })
  
}(document, window);

span.click-highlight {
  background-color: CornflowerBlue;
}

div {
  margin: 20px;
}

<div class="click-react">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe doloremque provident fuga possimus eum, ratione libero sapiente, inventore blanditiis nobis est tempora totam? Neque sequi asperiores animi fugiat ducimus. Quidem?</div>

<div class="click-react">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error esse obcaecati alias temporibus placeat? Nesciunt aliquam fugiat perspiciatis doloremque voluptatum excepturi aliquid quam dolore qui quos? Natus dicta vero eius, a optio enim nisi, temporibus harum, non quo recusandae molestias?</div>
<div class="click-react">Tempora totam, dolorem unde consectetur maxime rem nesciunt perferendis soluta dolores earum blanditiis excepturi perspiciatis eaque magnam sint praesentium id dicta laborum quibusdam vel eligendi modi quod odio magni. Tempore aperiam eaque consequatur perspiciatis odit quasi doloribus facere nostrum nesciunt?</div>
<div class="click-react">Pariatur omnis consequuntur quae id, ducimus iste. Quos aliquid maiores totam quo animi voluptatem sed dolores fugit, minima, earum natus voluptas velit pariatur dolore voluptate. Mollitia a ratione facere quisquam voluptate, debitis at officia facilis exercitationem minima, similique magnam dolor.</div>
<div class="click-react">Nihil nulla facilis, odit, saepe tempore, voluptate nemo quod nam ullam corrupti magni! Veritatis soluta officiis rerum, distinctio iste dignissimos numquam. Quaerat deserunt voluptatum beatae accusamus perspiciatis, nemo non magni ut, assumenda similique quae? Similique maiores debitis quod id dolor.</div>

Answer 2

您可以选择每个包含三个单词的div（在此示例中，我假设它们每个都有一个test-<NUMBER>类。选择之后，只需将一个类添加到突出显示的跨度中，然后根据当前div选择它：

var words = $("class^=test-");
words.each(function() {
  const self = this;
  let innerWords = $(this).text().split(/\s+/);
  const text = innerWords.join("</span> <span>");
  $(this).html("<span>" + text + "</span>");
  $(this).find("span").on("click", function() {
    $(self).find(".highlighted").removeClass("highlighted");
    $(this).addClass("highlighted");
    const word = $(this).html();
    input1.value = word;
  })
})

添加CSS类：

.highlighted {
  background-color: CornflowerBlue;
}

jQuery的find()方法是这里的神奇之处。