Question

我是筹码新手，所以请耐心等待我。我有一个带参数的简单函数，我正在使用Jquery：

function AnimateValues(a, b, c, d){
  return $(a).stop().animate({b : c}, d);
}

现在，我想在需要时调用它，例如：

AnimateValues('#div1', 'opacity', 1, 500);
AnimateValues('#div2', 'opacity', 0, 500);
AnimateValues('#div3', 'top', 20, 500);
...

但似乎只有最后一个被执行。帮助将是欣赏。

Answer 1

您需要在b中包含[]参数，否则只包含其字符串键。

＆＃13;

function AnimateValues(a, b, c, d){
  return $(a).stop().animate({[b] : c}, d);
}

AnimateValues('#div1', 'opacity', 1, 500);
AnimateValues('#div2', 'opacity', 0, 500);
AnimateValues('#div3', 'top', 20, 500);

＆＃13;

div {
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>

＆＃13;

Answer 2

这不是你问题的真正答案，因为only the last one is executed没有意义。

您的代码不应以您期望的方式对其中的任何代码起作用，因为{b : c}不会使用参数b的值作为对象的键，而是名称b本身。因此，它永远不会为top或opactiy

制作动画

如果您可以使用ES6功能，那么您可以编写[b]而不是b来使用值b作为关键字。

function AnimateValues(a, b, c, d){
  return $(a).stop().animate({[b] : c}, d);
}

或者

function AnimateValues(a, b, c, d){
  var params = {};
  params[b] = c;
  return $(a).stop().animate(params, d);
}

但正如我所说，这不会解释你的only the last one is executed。

Javascript使用不同的参数多次调用相同的函数

2 个答案: