Question

在这段代码中，我有4个矩形，需要绘制更多。而不是写单行更多次，我们不能为这个例子生成id，并为它使用循环吗？

<style>
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none; 
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
width:70;
height:50;
border-radius: 5px;
padding: 5px 15px;
background-color:#999999;
color:#CCCCCC;
font-family:calibri;
font-weight:700;
border:#777 solid 2px;
}

</style>

<div class="tooltip" style="width:100px; height:90px; background-    color:orchid; text-align:center">
Rect1
<span id="tooltip-span">
    Hello! I am<br/>
    Rect1!!!!!
</span>
</div>
<br/><br/><br/><br/><br/>
<div class="tooltip" style="width:100px; height:90px; background-color:Green; text-align:center">
Rect2
<span id="tooltip-span1">
    Hello! I am<br/>
    Rect2!!!!!
</span>
</div>
<br/><br/><br/><br/><br/>
<div class="tooltip" style="width:100px; height:90px; background-color:Orange; text-align:center">
Rect3
<span id="tooltip-span2">
    Hello! I am<br/>
    Rect3!!!!!
</span>
</div>
<br/><br/><br/><br/><br/>
<div class="tooltip" style="width:100px; height:90px; background-color:Skyblue; text-align:center">
Rect4
<span id="tooltip-span3">
    Hello! I am<br/>
    Rect4!!!!!
</span>
</div>
<script>
var tooltipSpan = document.getElementById('tooltip-span');
//I want these all to generate dynamically
var tooltipSpan1 = document.getElementById('tooltip-span1'); 
var tooltipSpan2 = document.getElementById('tooltip-span2');
var tooltipSpan3 = document.getElementById('tooltip-span3');
window.onmousemove = function (e) {
var x = e.clientX,
    y = e.clientY;
 //Can we write these lines in any of loop
 //after we could generate id dynamically?
tooltipSpan.style.top = (y + 20) + 'px'; 
tooltipSpan.style.left = (x + 20) + 'px';
tooltipSpan1.style.top = (y + 20) + 'px';
tooltipSpan1.style.left = (x + 20) + 'px';
tooltipSpan2.style.top = (y + 20) + 'px';
tooltipSpan2.style.left = (x + 20) + 'px';
tooltipSpan3.style.top = (y + 20) + 'px';
tooltipSpan3.style.left = (x + 20) + 'px';
};
</script>

最后避免多次同样的声明？请建议任何参考书或链接以获取更多相关信息？

Answer 1

假设你有一个这样的数组：

var data = [  
{   
    "srno" : 1 ,
    "status" : "Breakdown" , 
    "duration" : 100,
    "color" : "#CC0000",
    "start_time": 0,
    "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100"  
},
{
    "srno" : 2 ,
    "status" : "Mold-Change" , 
    "duration" :70 ,
    "color" : "#FF8000",
    "start_time": 100,
    "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100" 
}
] ;

你会创建一个功能，可以对每个对象做任何你想做的事情，在你的情况下设置顶部和左：

function setXY (item, x, y) {
          item.style.top = (y + 20) + 'px'; 
          item.style.left = (x + 20) + 'px';
}

然后，在你的情况下，这个函数将被调用：

window.onmousemove = function (e) {
   var x = e.clientX,
   var y = e.clientY;
   // iterate through all your tooltips in your data-array
   for (tip in data) {
       var tooltipSpan = document.getElementById('tooltip-span'+tip.srno);
       if(tooltipSpan) {  // just make sure you actually got a valid DOM-Object
           setXY(tooltipSpan, x, y);
       }
   }
}

<强> BUT：重新思考，如果你真的想在每一个鼠标移动时这样做！根据你的css中的悬停div来静态定位工具提示可能是足够的：

.tooltip:hover span {
  display:block;
  position: absolute;  // changed from fixed to absolute!
  top: 20px;
  left: 20px;
  overflow:hidden;
  ....
}

Answer 2

这是一种做你想做的事情的方法，这也可以节省你必须单独写出每个span的工作。

首先，您需要为每个div提供一个数据属性，以保持文本显示在其工具提示中，如下所示：

<div data-tooltip="This is a tooltip"></div>

然后使用以下JavaScript：

var divs=document.querySelectorAll("[data-tooltip]"),span=document.createElement("span"),x=divs.length,div;
while(x--){
    div=divs[x];
    div.appendChild(span.cloneNode(0))
    div.lastChild.id="tooltip-"+x;
    div.lastChild.innerHTML=div.dataset.tooltip;
    div.addEventListener("mousemove",function(event){
        var left=event.clientX,top=event.clientY;
        this.lastChild.style.top=(top+20)+"px";
        this.lastChild.style.left=(left+20)+"px";
    },0);
}

如何使用javascript动态生成id并将其提供给html SVG中的特定元素？

2 个答案: