Question

如何使用与for循环中使用的数组相同的索引引用数组项？

动画[i]当前返回未定义：

var icons = ["#know","#run","#think","#done","#measure","#plan","#resolve"]
var animations = [knowTl,runTl,thinkTl,doneTl,measureTL,planTl,resolveTl]

for(var i=0;i<icons.length;i++) {
$(icons[i]).hover(
  function() {
  animations[i].restart()
  },
  function() {}
 );
}

Answer 1

这样做

for(var i=0;i<icons.length;i++) {
(function(i){
  $(icons[i]).hover(
    function() {
      animations[i].restart()
    },
    function() {}
   );
})(i)
}

Answer 2

您误解了JS范围的工作原理。当您发生悬停事件时，将执行您传递给悬停的功能。但是当它发生时，你的 i 变量的值为 icons.length ，因为你的 for 循环已经停止迭代。

当悬停事件发生时，您需要的是获取动画功能参考。

使用ES6编写的Theres示例代码

const animationsSet = [{
  element: '#know',
  animation: knowTl
}, {
  element: '#run',
  animation: runTl
}]

animationsSet.forEach(({ element, animation }) =>
  $(element).hover(() => animation.restart())
)

Answer 3

你可以避免关闭。

要将悬停事件附加到您可以使用的所有图标元素：

$(icons.toString()).hover(

这样你就可以避免使用for循环了。

现在问题：如何获得指数我？

可以通过查找索引来解决此步骤：

var i = icons.indexOf('#' + this.id);

根据 grzesiekgs 报告的评论，您可以为每个元素添加新属性。因此，以前的选择器可以链接：

.attr('idx', (idx, attr) => {return idx;})

在处理程序中，您可以直接使用新属性。

所以片段：

var icons = ["#know", "#run", "#think", "#done", "#measure", "#plan", "#resolve"];
var animations = ['knowTl', 'runTl', 'thinkTl', 'doneTl', 'measureTL', 'planTl', 'resolveTl'];

$(icons.toString())
           .attr('idx', (idx, attr) => {return idx;})
           .hover(
           function () {
            var i = icons.indexOf('#' + this.id);
            
            var idxAttr = this.getAttribute('idx');

           
            console.log('IN (idxAttr =' + idxAttr + '): animations[' + i + ']=' + animations[i]);
            //animations[i].restart()
        },
        function () {
            // var i = icons.indexOf('#' + this.id);
            // console.log('OUT: animations[' + i + ']=' + animations[i]);
        }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="know">know</p>
<p id="run">run</p>
<p id="think">think</p>
<p id="done">done</p>
<p id="measure">measure</p>
<p id="plan">plan</p>
<p id="resolve">resolve</p>

for循环生成的悬停事件中的引用数组

3 个答案: