Question

首先：请不要告诉我如何在jQuery或其他库中执行此操作。我无法让他们在sharepoint环境中工作，我在操作答案需要使用vanilla 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>

Answer 1

你可以这样做，因为唯一改变的是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>"; 

  }
}

针对相同用例的更简洁方法是分离关注点，即让HTML仅具有页面或视图的布局，并使用Javascript绑定事件而不是他们内联。这将有助于您的代码长期可维护。对于要传入的索引，可以使用data-*属性将它们保存在每个元素上。

<强> HTML

<h3>Meet the Team</h3>
<ul>
  <li><a class="emp" data-index="1" href="#">emp1</a></li>
  <li><a class="emp" data-index="2" href="#">emp2</a></li>
  <li><a class="emp" data-index="3" href="#">emp3</a></li>
  <li><a class="emp" data-index="4" href="#">emp4</a></li>
  <li><a class="emp" data-index="5" href="#">emp5</a></li>
</ul>
</br>

<iframe id="content-iframe" height='300px' frameborder='0' scrolling='no' marginwidth='0' marginheight='0' src=''>
  < /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';
});

Answer 2

我对javascript了解不多，但也许你可以使用这样的东西：

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

如何进行迭代（循环）？

2 个答案: