Question

我有一个脚本可以在onmouseover事件触发的两个弹出窗口之间切换。这样做的一个特点是弹出窗口一直持续到下一个onmouseover事件。我希望有很多这样的，所以隐藏的弹出窗口不能像我的脚本那样“硬编码”。有没有办法在变量中存储下次弹出函数被调用时需要不显示的弹出窗口的id？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function popup(show,hide){
    show.style.display="block"
    hide.style.display="none"
    }
</script>
<style type="text/css">
.pop {
    position: absolute;
    display: none;
    top: 50px;
    left: 200px;
    width: 300px;
}
</style>
</head>
<body>

<table><tr>
<td onmouseover="popup(pop1,pop2)">Show popup 1</td>
<td onmouseover="popup(pop2,pop1)">Show popup 2</td>
</tr></table>

<div class="pop" id="pop1">This is popup 1</div>
<div class="pop" id="pop2">Popup 2 is here</div>

</body>
</html>

或转到http://www.salemharvest.org/Utilities/TestingPHP/testingpopupdivs5.php

Answer 1

概括它的一种方法是使用元素索引来显示关联的弹出窗口。这将要求元素包含弹出元素（pop类元素），以使 popper 和弹出元素索引同样映射为两个相同长度的数组。

当显示弹出窗口时，弹出元素将保存在一个变量中，稍后当鼠标位于不同的 popper 元素上时将使用该变量。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
addEventListener("DOMContentLoaded", function() {
  var lastPopup = null;
  function showit(ev) {
    var popups = document.getElementById("popups").children;
    eleToShow = popups[ev.target.cellIndex];
    if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
    eleToShow.style.display = "block";
    lastPopup = eleToShow;
  }
  var poppers = document.getElementById("poppers").cells, i;
  for (i = 0; i < poppers.length; i++) {
    poppers[i].addEventListener("mouseover", showit, false);
  }
}, false);
</script>
<style type="text/css">
.pop {
    position: absolute;
    display: none;
    top: 50px;
    left: 200px;
    width: 300px;
}
</style>
</head>
<body>

<table><tr id="poppers">
<td>Show popup 1</td>
<td>Show popup 2</td>
</tr></table>

<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
</div>

</body>
</html>

Answer 2

我可能应该从这开始，但我的poppers实际上是行，而不是单元格。我尝试了对Jay的代码进行简单修改，以便用行来完成。我将其更改为索引行，然后使用rowIndex查找弹出窗口，但我遗漏了一些内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// function by Jay at stackoverflow
addEventListener("DOMContentLoaded", function() {
  var lastPopup = null;
  function showit(ev) {
    var popups = document.getElementById("popups").children;
    eleToShow = popups[ev.target.rowIndex];
    if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
    eleToShow.style.display = "block";
    lastPopup = eleToShow;
  }
  var poppers = document.getElementById("poppers").rows, i;
  for (i = 0; i < poppers.length; i++) {
    poppers[i].addEventListener("mouseover", showit, false);
  }
}, false);
</script>
<style type="text/css">
.pop {
    position: absolute;
    display: none;
    top: 100px;
    left: 200px;
    width: 300px;
}
</style>
</head>
<body>

<table id="poppers">
<tr><td>Show popup 1</td></tr>
<tr><td>Show popup 2</td></tr>
<tr><td>Show popup 3</td></tr>
</table>

<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
<div class="pop">And then popup 3</div>
</div>

</body>
</html>

如何在鼠标悬停时为多个弹出窗口推广此脚本

2 个答案: