Javascript 如何进行此迭代（循环）？

第一：请不要告诉我如何在jQuery或其他库中执行此操作。我无法让它们在sharepoint环境中工作，我正在使用的答案需要是香草javascript

我使用下面的代码将内容提要制作到div中，我知道因为它使用数字来区分每个人，所以必须有一种更优雅的方法来实现这一点，而无需重复代码

<h3>Meet the Team</h3>
<ul>
<li><a onmouseover="mouseOver(1)" onmouseout="mouseOut()" href="#">emp1</a></li>
<li><a onmouseover="mouseOver(2)" onmouseout="mouseOut()" href="#">emp2</a></li>
<li><a onmouseover="mouseOver(3)" onmouseout="mouseOut()" href="#">emp3</a></li>
<li><a onmouseover="mouseOver(4)" onmouseout="mouseOut()" href="#">emp4</a></li>
<li><a onmouseover="mouseOver(5)" onmouseout="mouseOut()" href="#">emp5</a></li>
</ul>
</br>
<div id="contactInfo"></div>
<script type="text/javascript">
function mouseOver(x) 
 {
    if(x==1)
    {
        document.getElementById('contactInfo').innerHTML = '<iframe height=\'300px\' frameborder=\'0\' scrolling=\'no\' marginwidth=\'0\' marginheight=\'0\' src=\"../Style Library/htmlContent/emp1.htm\" ></iframe>'; 
    }
    else if(x==2)
    {
        document.getElementById('contactInfo').innerHTML = '<iframe height=\'300px\' frameborder=\'0\' scrolling=\'no\' marginwidth=\'0\' marginheight=\'0\' src=\"../Style Library/htmlContent/emp2.html\" ></iframe>';    
    }
    else if(x==3)
    {
        document.getElementById('contactInfo').innerHTML = '<iframe height=\'300px\' frameborder=\'0\' scrolling=\'no\' marginwidth=\'0\' marginheight=\'0\' src=\"../Style Library/htmlContent/emp3.html\" ></iframe>';    
    }
    else if(x==4)
    {
        document.getElementById('contactInfo').innerHTML = '<iframe height=\'300px\' frameborder=\'0\' scrolling=\'no\' marginwidth=\'0\' marginheight=\'0\' src=\"../Style Library/htmlContent/emp4.html\" ></iframe>';    
    }
    else if(x==5)
    {
        document.getElementById('contactInfo').innerHTML = '<iframe height=\'300px\' frameborder=\'0\' scrolling=\'no\' marginwidth=\'0\' marginheight=\'0\' src=\"../Style Library/htmlContent/emp5.html\" ></iframe>';
        }
 }
function mouseOut() 
 {
    document.getElementById('contactInfo').innerHTML = '';
 }
</script>

与团队会面









功能鼠标盖（x）
{
如果（x==1）
{
document.getElementById（'contactInfo'）。innerHTML=''；
}
else如果（x==2）
{
document.getElementById（'contactInfo'）。innerHTML=''；
}
else如果（x==3）
{
document.getElementById（'contactInfo'）。innerHTML=''；
}
else如果（x==4）
{
document.getElementById（'contactInfo'）。innerHTML=''；
}
else如果（x==5）
{
document.getElementById（'contactInfo'）。innerHTML=''；
}
}
函数mouseOut（）
{
document.getElementById（'contactInfo'）。innerHTML=''；
}

您可以这样做，因为唯一改变的是

emp

文件名，您可以动态构建它

function mouseOver(x) {
  if (x >= 1 && x <= 5) {
    var fileName = 'emp' + x + '.html';

    document.getElementById('contactInfo').innerHTML = "<iframe height='300px' frameborder='0' scrolling='no' marginwidth='0' marginheight='0' src='../Style Library/htmlContent/" + fileName + "'></iframe>"; 

  }
}

Javascript

var elems = document.querySelectorAll(".emp");
var iframe = document.querySelector('#content-iframe');

//  hide the iframe on page load
iframe.display = 'none';

elems.forEach(function(elem) {
  elem.addEventListener('mouseover', function() {
    var fileName = 'emp' + this.getAttribute('data-index') + '.html'; // or this.innerHTML.trim() + '.html';
    var src = '../StyleLibrary/htmlContent/' + fileName;

    iframe.display = 'block';
  });
});

elem.addEventListener('mouseout', function() {
  iframe.src = '';
  iframe.display = 'none';
});

---

我对javascript了解不多，但也许您可以使用以下内容：

for (i = 0; i < mouseOver.length; i++) {
    // your code here
} 

for（i=0；i

一个更干净的解决方案是在DOM中添加

，只需隐藏/显示它并更改它的

src

，而不是在每个鼠标上重新创建和删除它：）@Sushanth，我是否应该/可以将“var elems=document.queryselectoral（“ul li a”）；”更改为“var elems=document.getElementByClass（.emp”）；以防我有其他未排序的链接列表？@black_reaver，只要您在可以使用

document.getElementByClass（“emp”）的元素上有
class
；

或

document.queryselectoral（.emp”）；

再次检查

检查编辑的代码。还包括来自@Andreas@Sushanth太好了！但是如果我们在DOM中有iframe，我们就不能不引用“contactInfo”div吗？现在我看到了，一个基本变量就可以了。谢谢你的提醒。

for (i = 0; i < mouseOver.length; i++) {
    // your code here
}