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

在这段代码中，我有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>

最终避免多次重复相同的语句？

---

请推荐任何参考书或链接以获取更多信息？

假设您有这样一个数组：

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" 
}
] ;

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);
       }
   }
}

您可以创建一个函数，该函数可以对每个对象执行任何您想要的操作，在您的示例中设置为top&left：

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

在您的情况下，此函数的调用方式如下：

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" 
}
] ;

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;
  ....
}

---

这里有一种做你想做的事情的方法，也可以省去你必须单独写出每个跨度的工作

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

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

---

您可能希望有一个javascript对象数组，每个tooltipSpan都是一个对象。然后，您可以遍历所有工具提示栏。有关文档，请参阅。@Jeft。。是的，如果我想生成id呢？id应该从哪里来？你需要从DOM中提取它们吗？这可以通过选择具有类工具提示并引用其子级的所有元素来实现。更好的方法是从对象数组中动态创建工具提示edited@Jeft.Likespan id，以及其中要显示为工具提示的内容。我有一个很大的问题。我用过图书馆，但它们看起来不像工具提示！但问题是创建工具提示的初始数据来自何处。这就是你应该从哪里获得ID的地方。非常感谢你提供了最简单的解决方案@杰夫特，我能再问你一个问题吗？比如你为什么要用这个东西？以及工具提示将如何获取工具提示名为JSON对象的内容，以便itle在其上显示欢迎！如果答案解决了你的问题，你可能会想接受它。如果问题与此相关，请继续！如果是另一个问题，你可能应该问一个新问题。请告诉我这个var text=document.createElementP；因此它将像我们检索的那样分配id:id=tooltip-span1，并且对于您，使用了var-tooltipSpan=document.getElementById'tooltip-span'+tip.srno；text.setAttributeid，工具提示span+tip.srno；要使用的工具是否相同？是，或text.id='tooltip span'+tip.srno；但这假设您处于同一种循环中：对于数据中的提示{…}谢谢shaggy！我想让你看看我为什么要实施这个。。