javascript - 在突出显示时显示 DIV，然后隐藏

Question

我试图在突出显示特定文本时显示隐藏的 div 标签。我能够在突出显示时显示一个隐藏的 div，但我无法完成的两部分是:

1. 仅在突出显示特定文本时显示(我假设使用跨度标记 ID 或类似的内容)

2. 将显示更改为阻止后，5 秒后将其更改回隐藏。

这是我的尝试。同样，这确实显示了突出显示的隐藏 div，但据我所知。请帮忙!

 function ShowNote() {
   document.getElementById('Note').style.display = 'block';
 }

 document.onmouseup = ShowNote;
 if (!document.all) document.captureEvents(Event.MOUSEUP);

 function HideNote() {
   document.getElementById('Note').style.display = 'hidden';
 }
 setTimeout("HideNote()", 5000); // after 5 secs

I DON'T want it to show when I highlight this text
<br />I DO want it to show when I highlight this text.
<div type='text' id='Note' style="display:none;">HIDDEN DIV CONTENT</div>

Answer 1

你已经很接近了!

这是我所拥有的:

function ShowNote() {
    if(window.getSelection() == "I DO want it to show when I highlight this text.")
        document.getElementById('Note').style.display = 'block';
        setTimeout(function(){
        	document.getElementById('Note').style.display = 'none';
        }, 5000); // after 5 secs
    }
    
    document.onmouseup = ShowNote;
    if (!document.all) document.captureEvents(Event.MOUSEUP);

I DON'T want it to show when I highlight this text<br />
    I DO want it to show when I highlight this text.
    <div type='text' id='Note' style="display:none;" >HIDDEN DIV CONTENT</div>

变化:

• 您需要通过“window.getSelection()”检查突出显示的内容 功能。
• 您正在向 setTimeout 传递一个字符串
• 隐藏不是有效的显示选项，没有

所以你知道，让文本漂浮在标签之外通常是不好的做法。因此最好将前两行放在 <p> 中标签或其他东西。