Question

这就是我的意思，我有一个功能设置各种LI的背景和背景位置来制作社交媒体精灵，现在我想要一个悬停事件监听器，以及何时盘旋将背景图像从原始位置向上移动-29px。

所以要做到这一点，我使用一个在for循环的不同实例中声明和设置的变量（在这种情况下，它的var＆＃34; k＆＃34;）k以=开始，然后每次循环迭代得到 - 28添加到它。

我希望for循环中的事件监听器中的函数使用此变量来计算其悬停背景位置，当我添加参数时，它最终在for循环运行时调用自身（就像我使函数记录一样）我能够从它之前的循环中记录var i，但是当我想要它时它没有运行。

这里我留下一个片段

＆＃13;

function sprite() {

  var c = document.getElementById("social").children;
  var k = 0;
  var cnc = "";
  for (i = 0; i < c.length; i++) {
    c[i].style.backgroundImage = "url(../Imgs/social_icons.jpg)";
    cnc = String(k) + "px 0px";
    c[i].addEventListener("mouseenter", spriteHover);
    k = k - 28;
    c[i].style.backgroundPosition = cnc;
  }
}

function spriteHover() {
  var c = this.querySelector("li");
  var pnc = "0px -29px";
  c.style.backgroundPosition = pnc;
}
sprite();
alert("working");

/*this is how my function was originally (the way i want it to work but doesnt) notice line 32
function sprite() {

    var c = document.getElementById("social").children;
    var k = 0;
    var cnc = "";
    for (i = 0; i < c.length; i++) {
        c[i].style.backgroundImage = "url(../Imgs/social_icons.jpg)";
        cnc = String(k) + "px 0px";
        c[i].addEventListener("mouseenter", spriteHover(k));
        k = k - 28;
        c[i].style.backgroundPosition = cnc;
    }
}

function spriteHover(k) {
    var c = this.querySelector("li");
    var pnc = k +"px -29px";
c.style.backgroundPosition = pnc;
}
sprite();



*/

＆＃13;

.smedia {
  background-color: ;
  height: 20px;
  position: absolute;
}
.smedia > ul {
  position: relative;
  display: inline-block;
  background-color: ;
  left: 836px;
  height: 28px;
  margin-right: 8px;
  margin-top: 8px;
}
.smedia > ul li {
  background-color: black;
  display: inline-block;
  height: 28px;
  width: 28px;
}
.smedia a {
  display: inline-block;
  color: black;
  text-decoration: none;
  height: 28px;
  width: 28px;
}

＆＃13;

<nav class="smedia" id="smedia">
  <ul id="social">
    <li>
      <a href="https://www.facebook.com/" class="fb" target="_blank"></a>
    </li><!--

                        --><li>
      <a href="https://twitter.com/?lang=en" class="tt" target="_blank"></a>
    </li><!--

                        --><li>
      <a href="https://www.youtube.com/" class="yt" target="_blank"></a>
    </li><!--

  --><li>
      <a href="https://www.instagram.com/?hl=en" class="ig" target="_blank"></a>
    </li><!--

                        --><li>
      <a href="https://www.tumblr.com/" class="t" target="_blank"></a>
    </li><!--

                        --><li>
      <a href="https://www.google.com/" class="gg" target="_blank"></a>
    </li>
  </ul>
</nav>

＆＃13;

，欢迎任何想法或更正。

Answer 1

简单回答是的。您需要一个函数来创建一个完整的函数并返回它而不是评估函数语句并返回评估结果。

所以举个例子。如果我设置行

c[i].addEventListener("mouseenter", spriteHover);

到

c[i].addEventListener("mouseenter", spriteHover(c[i],k));

如果您尝试提醒spriteHover函数中的参数，这看起来像是正确传递参数。但它不工作的原因是因为这个语句不是将一个函数指定为事件监听器，而是分配在for循环中调用时返回的spriteHover函数的结果（在函数名实际生成javascript之后放置括号）叫这个功能）。

因此，为了传递参数但将整个函数返回给事件监听器语句，我们创建了另一个函数，它实际上将函数作为一个整体返回给我们。 e.g。

// Handler that will return a function to the addeventlistener
  function createHoverHandler(param1, param2 ....) {
     return function() {
         spriteHover(param1, param2 ....);
     }
  }

以下是使用您的代码和创建者功能的示例。请注意，我已将mouseenter更改为mouseover并在mouseout中添加以实现悬停效果，我们必须定义鼠标何时进入元素以及何时退出时的情况。

示例代码：http://codepen.io/Nasir_T/pen/rWJNKX

希望这有助于了解如何实现这一目标。

一个函数可以在 - ＆gt;事件监听器在 - ＆gt; for loop有参数吗？

1 个答案: