在突出显示的元素上添加类？

Question

是否可以在突出显示的元素上添加类？例如:如果我选择.block-2, .block-3, .block-4并按下Enter键，那么所有这些块都应该添加一个新的类。我的意思是，当按下Enter键时，我需要在高亮选择中获得所有这些元素。

<div class="root">
  <div class="block-1"> 1st </div>
  <div class="block-2"> 2nd </div>
  <div class="block-3"> 3rd </div>
  <div class="block-4"> 4th </div>
  <div class="block-5"> 5th </div>
</div>

​

​

Answer 1

您将希望使用selections来执行此操作。如果您是containsNode，则可以使用ie9+来完成其余的工作。

https://developer.mozilla.org/en-US/docs/Web/API/Selection

假设您可以使用containsNode，您应该能够侦听keydown，通过Enter进行筛选，然后根据所选内容中是否包含块节点，最终查询文档中的选择并应用类。

const $root = document.querySelector('.root');

document.addEventListener('keydown', (e) => {
    if (e.code == "Enter") {
    const selection = document.getSelection();
    console.log(selection)
    for (const $child of $root.children) {
        if (selection.containsNode($child) || $child.contains(selection.anchorNode) || $child.contains(selection.focusNode)) {
        $child.classList.add('selected');
      } else {
        $child.classList.remove('selected');
      }
    }
  }
});

这段代码在大约3分钟内被放在一起，不是最优的，在使用之前应该对其进行检查。您可以在行动@ https://jsfiddle.net/z0gh7eck/2/中看到它。

Answer 2

根据jandy对stackovweflow的回答。没有“选定文本”的事件。但是您可以绑定mouseup事件以检查是否有选择，然后添加一个类。