javascript - 单击单词时获取单词的值

Question

我有传递到页面的文本。还有一些“特殊单词”可以通过使用此 highlight function below 来突出显示。 。

它将其放入 <a> 中标签及其类和使其突出显示的样式。运行此功能后，文本中的特殊单词将突出显示并可单击。

所以它会对文本执行以下操作:<a class="clickable" style="background-color: yellow;">Hello</a> 。创建 <a> ，将其放入 class和styles它。

我现在遇到的问题是，当我点击一个已突出显示的单词时，它有自己的 class='clickable'我怎样才能知道哪个词被点击了？我需要检查点击了哪个单词，以便查询数据库并获取该单词的注释。

highlight = words => {
  const high = document.getElementById('scrollable');
  const paragraph = high.innerHTML.split(' ');
  const res = [];

    paragraph.map(word => {
      let t = word;
      if (words.indexOf(word) > -1) {
        t =
          '<a class="clickable" style="background-color: yellow;">' +
          word +
          '</a>';
        console.log(words.indexOf(word));
      }
      // console.log(words);
      res.push(t);
    });

    high.innerHTML = res.join(' ');
    const elementsToMakeClickable = document.getElementsByClassName(
      'clickable'
    );
    const elementsToMakeClickableArray = Array.from(elementsToMakeClickable);

    elementsToMakeClickableArray.map(element => {
      element.addEventListener('click', this.viewAnnotation.bind(this));
    });
}

要保存一些时间日志: console.log(words);将返回三个特殊单词。 console.log(words.indexOf(word));会将每个单词返回为 0,1 或 2，因为显然我们正在 console.logging index .

数据库中的特殊词是:Hello , Lorem和dolor 。并不是说它应该有帮助，但我已经将其包含在内。

Answer 1

我不确定我的理解是否正确...由于您已经监听了每个 a.clickable 元素的 click 事件，我假设您的问题是获取单词的检索部分？

在event-hander中，当前元素作为target添加到event-object中。要检索 html/文本内容，可以将此元素与 textContent/innerText/innerHTML 属性结合使用:

viewAnnotation(e) {
  const word = e.target.textContent.trim()

  // Do something with `word`
}