javascript - 如何使用javascript动态生成id并将其赋予html SVG中的特定元素？

Question

在此代码中，我有 4 个矩形，需要绘制更多。 我们不能在这个例子中为 for 生成 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);
       }
   }
}

但是: 如果您真的想在每次鼠标移动时都执行此操作，请重新考虑! 根据 css 中的悬停 div 静态定位工具提示可能就足够了，如下所示:

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