Question

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

仅在突出显示特定文本时显示（我假设使用范围标记ID或类似内容）
将显示更改为阻止后，请在5秒后将其更改回隐藏状态。

这是我的尝试。同样，这确实显示了突出显示的隐藏div，但就我而言。请帮忙！

＆＃13;

 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

＆＃13;

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>

＆＃13;

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
hidden不是有效的显示选项，没有

所以你知道，在标签外面放置文字通常是不好的做法。因此，最好将前两行放在<p>标签中。

Answer 2

您使用的是陈旧且过时的代码。这是现代方法：

＆＃13;

function showNote() {
   document.getElementById('Note').classList.remove("hide");
   setTimeout(hideNote, 5000); // after 5 secs
}

function hideNote(){
  document.getElementById("Note").classList.add("hide");
}

document.getElementById("select").addEventListener("mouseup", showNote);

＆＃13;

.hide { display: none; }

#select { color:red; }

＆＃13;

<div>I DON'T want it to show when I highlight this text</div>
<div>I DO want it to show when I highlight <span id="select">this text</span>.</div>
<div type='text' id='Note' class="hide">HIDDEN DIV CONTENT</div>

＆＃13;

Answer 3

这就是我为你所做的。我设置间隔。每次你出鼠时都会出现这种情况。或者更好的是它会检查你的div风格是否在页面上是阻止的。希望这可以帮助 Live exapmle on Codepen

var target = document.getElementById('note');

var i = setInterval(function(){ 
   if (document.getElementById("note").style.display == 'block') { 
    hide();
  }
}, 5000);

function showNote() {
  target.style.display = 'block';
}
function hide(){
 document.getElementById("note").style.display = "none";
}

在突出显示DIV然后隐藏

3 个答案: