Question

我试图在客户点击指向地图上某个地方的小点状div（7x7px黑色背景）后显示包含某些信息的div。它可以工作，但点状div和信息div之间的距离在每个点信息对中都是不同的。

这是HTML / JS脚本。请不要介意所有JavaScript和CSS都在同一个文件中，为简单起见，最近会更改。

<html>
<head>
<meta charset="utf8" />
</head>
<body>

<div id="pointer_div" 
onclick="getClickPosition(event)" 
style="position:absolute; top:1px; left:1px; border: 1px solid black;
   background-repeat: no-repeat; width: 1146px; height: 714px;" >

  <div id="sofia"
  onclick="showForecast('Sofia_381_178')"
  style="position:relative; top: 381px; left: 178px;
  background:black; width: 7px; height: 7px;" ></div>

  <div id="plovdiv"
  onclick="showForecast('Plovdiv_512_435')"
  style="position:relative; top: 512px; left: 435px;
  background:black; width: 7px; height: 7px;" ></div>

  <div id="ruse"
  onclick="showForecast('Ruse_77_662')"
  style="position:relative; top: 77px; left: 662px;
  background:black; width: 7px; height: 7px;" ></div>

  <div id="result_data" 
  style="visibility:hidden; width:300px; height:100px; 
         border: 1px solid black; background:white;"/></div>
</div>

<script language="JavaScript">

function showForecast (strr) {
var splits = strr.split('_');
var xcoord = splits[2];
var ycoord = splits[1];

  if (xcoord>810) xcoord= xcoord-300;
  if (ycoord>610) ycoord= ycoord-100;

var resultDiv= document.getElementById("result_data");
resultDiv.style.visibility="visible";
resultDiv.style.position = "relative";
resultDiv.style.left = xcoord;
resultDiv.style.top = ycoord;
resultDiv.innerHTML = 'Forecast for: ' + splits[0];
};

</script>
</body>
</html>

所以，当我点击div＆＃34; plovdiv＆＃34;时，info div会出现在dot-div下方30px处，但是当我点击＆＃34; ruse＆＃34;信息div显示在点下方。我在Firefox和SeaMonkey浏览器中检查了它们，它们的行为完全相同。

我试图将脚本放在jsfiddle中，但它显示了页面左上角的所有信息div，我无法解决这个问题。无论如何，如果有人对此感兴趣jsfiddle。

info divs的坐标以字符串形式传递给JS函数，它们与dot divs的坐标相同（我在html文件中保存css的原因之一）。我希望有更好理解JS的人能够解释这一点。

Answer 1

这是因为您在div上使用position:relative，这会将它们从默认情况下的位置移开。所以（因为div是一个块元素）ruse将在plovdiv下属于sofia，然后它们被top和left值移动。让他们全部position: absolute，他们将统一行事。

这里是您在jsfiddle中运行的代码（我在您的js中添加了px单位）：https://jsfiddle.net/wkz6dj04/5/

#sofia {
  position: absolute;
  top: 381px;
  left: 178px;
  background: black;
  width: 7px;
  height: 7px;
}

#plovdiv {
  position: absolute;
  top: 512px;
  left: 435px;
  background: black;
  width: 7px;
  height: 7px;
}

#ruse {
  position: absolute;
  top: 77px;
  left: 662px;
  background: black;
  width: 7px;
  height: 7px;
}

以下是使用上述修改的代码：https://jsfiddle.net/wkz6dj04/6/

如果您希望重新填补空白，我建议您使用margin-top #result_data，就像这个小提琴一样：https://jsfiddle.net/wkz6dj04/7/

具有相等坐标的JS div具有不同的偏移量

1 个答案: