Question

所以这是我需要复制的函数的一个例子：

document.getElementById('img1').onmouseover = function() {
    document.getElementById('img1').style.width = expandTo + '%';

    expandCompensate(1);
}

document.getElementById('img1').onmouseout = function() {
    expandReset();
}

情况是我有一个for循环创建了一些div元素，并且它们的数量是动态的。截至目前，我创建了4个div元素，因此我为img1，img2，img3和img4创建了上述函数的4次迭代。但我想要做的是根据我决定创建的onmouseover个元素（基于变量）动态创建onmouseout和div函数。

有没有办法做到这一点？这里是上下文的所有代码（它并不多），JS中有注释，包含对所有内容的解释。我尝试自动化的部分位于底部：

https://jsfiddle.net/4w0714su/3/

以下是我尝试实现的背景的工作示例：

http://www.ericsartor.ca/imgwide

仅供参考：我选择的图像是随机的，我只需要高分辨率图像。这样做是为了练习！感谢任何可以帮助我解决这个问题的人！

Answer 1

我无法理解你的代码，但我会特别回答你的问题。

你可以通过循环实现你想要的东西：

for (var i = 0; i < 4; i++) {
  document.getElementById('img' + i).onmouseover = function() {
    this.style.width = expandTo + '%';
    expandCompensate(Number(this.id.replace('img', '')));
  };

  document.getElementById('img' + i).onmouseout = function() {
    expandReset();
  }
}

注意：您不能在事件处理程序的函数中使用i变量，因为它始终为4，因为它将完成循环，并且永远不会再次更改。 / p>

另一种方法是使用IIFE (Immediately-invoked function expression)，例如：

for (var i = 0; i < 4; i++) {
  (function(n) {
    document.getElementById('img' + n).onmouseover = function() {
      this.style.width = expandTo + '%';
      expandCompensate(n);
    };

    document.getElementById('img' + n).onmouseout = function() {
      expandReset();
    }
  })(i);
}

这样做，您将函数传递给当前i值，因此在该范围内，n的值对于每次执行都是不同的，例如0 ，1，2和3。

立即调用的函数表达式（或IIFE，发音为 “iffy”）是一种JavaScript设计模式，它产生一个词法范围使用JavaScript的函数范围。

Answer 2

这可以通过在DOM中迭代所有loop元素和绑定事件来实现。

当我们绑定loop中的事件时，事件callback将在以后完全迭代循环时执行，我们需要使用CLOSURE维护当前迭代的值。

试试这个代码段：

var pageHeight = document.getElementById('findBottom').getBoundingClientRect().bottom,
  numOfPics = 4; //the number of div elements to create

//creates the div elements within a container div in the HTML document
for (var i = 1; i <= numOfPics; i++) {
  document.getElementById('imgContain').innerHTML += '<div id="img' + i + '" class="imgPane"></div>';
}

//used to resize all divs if the window changes size
window.onresize = function() {
  pageHeight = document.getElementById('findBottom').getBoundingClientRect().bottom;
  for (var i = 1; i <= imgClasses.length; i++) {
    document.getElementById('img' + i).style.height = pageHeight + 'px';
  }
  for (var i = 1; i <= imgClasses.length; i++) {
    document.getElementById('img' + i).style.width = 100 / imgClasses.length + '%';
  }
};

//sets the height of each div to be the mximum height of the page (without scrolling)
for (var i = 1; i <= numOfPics; i++) {
  document.getElementById('img' + i).style.height = pageHeight + 'px';
}

//makes all the divs equal percentage widths
for (var i = 1; i <= numOfPics; i++) {
  document.getElementById('img' + i).style.width = 100 / numOfPics + '%';
}

//the percentage of the page the hovered image will expand to
var expandTo = 40;

//function for when an image is hovered over
function expandCompensate(whichImg) {
  for (var i = 1; i <= numOfPics; i++) {
    if (i != whichImg)
      document.getElementById('img' + i).style.width = (100 - expandTo) / (numOfPics - 1) + '%';
  }
}

//function for when the hovered image is left to reset the widths
function expandReset() {
    for (var i = 1; i <= numOfPics; i++) {
      document.getElementById('img' + i).style.width = 100 / numOfPics + '%';
    }
  }
  (function bindEvents() {
    for (var i = 1; i <= numOfPics; i++) {
      document.getElementById('img' + i).onmouseover = (function(i) {
        return function() {
          document.getElementById('img' + i).style.width = expandTo + '%';
          expandCompensate(i);
        }
      })(i);

      document.getElementById('img' + i).onmouseout = function() {
        expandReset();
      };
    }
  })();

body,
p,
div {
  margin: 0;
  padding: 0;
}
body {} #findBottom {
  position: absolute;
  bottom: 0;
}
.imgPane {
  float: left;
  background-position: center;
  transition: width 0.25s;
}
#img1 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//1.jpg');
}
#img2 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//2.jpg');
}
#img3 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//3.jpg');
}
#img4 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//4.jpg');
}

<div id="imgContain"></div>

<!-- ABSOLUTE ELEMENTS -->
<div id="findBottom"></div>
<!-- ABSOLUTE ELEMENTS -->

使用javascript动态创建onmouseover / onmouseout函数？

2 个答案: