0

onmouseoverイベントによってトリガーされる 2 つのポップアップを切り替えるスクリプトがあります。この機能の 1 つは、ポップアップが次の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にアクセスしてください

4

2 に答える 2

0

これを一般化する1つの方法は、要素インデックスを使用して関連するポップアップを表示することです。これには、ポッパーとポップアップ要素の両方のインデックスを同じ長さの2つの配列のように等しくマップするために、ポップアップ要素（popクラス要素）が要素に含まれている必要があります。

ポップアップを表示するとき、ポップアップ要素は変数に保存されます。この変数は、後でマウスが別のポッパー要素上にあるときに使用されます。

<!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>
于 2012-11-04T02:52:16.637 に答える
0

おそらくこれで始めるべきでしたが、私のポッパーは実際にはセルではなく行になります。行でそれを行うために、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>
于 2012-11-04T12:52:47.430 に答える