Question

在我正在处理的头像生成器中，我有几个按钮事件，它们做同样的事情，但身体部位不同。我不想让不同的函数做同样的事情，所以我想对所有身体部位使用一个函数。

下面第14行使用对象'AvGen.eyes.currEyesNr'，但我想使用单击按钮。我可以将什么作为参数放入，如何使用函数中的参数来使用正确的对象参数？

    1.    prevBodyBtn.on('click', function(){
    2.        if (AvGen.theBody.currBodyNr > 0) {
    3.            changePart(-1);
    4.        }
    5.    });
    6.
    7.    prevEyesBtn.on('click', function(){
    8.        if (AvGen.eyes.currEyesNr > 0) {
    9.            changePart(-1);
   10.        }
   11.    });
   12.
   13.    function changePart(direction) {
   14.        AvGen.eyes.currEyesNr += direction;  // <-- this is now always 'AvGen.eyes.currEyesNr' but should be dynamic
   15.
   16.        var body = AvGen.theBody.bodies[AvGen.theBody.currBodyNr],
   17.            eyes = AvGen.eyes.eyes[AvGen.eyes.currEyesNr],
   18.            nose = AvGen.nose.noses[AvGen.nose.currNoseNr];
   19.            mouth = AvGen.mouth.mouths[AvGen.mouth.currMouthNr];
   20.
   21.        AvGen.addSVG(body, eyes, nose, mouth);
   22.    }

Answer 1

将指示当前索引值的属性名称从currBodyNr，currEyesNr等更改为currNr。

然后，您可以按名称解决AvGen所需的属性：

function changePart(direction, bodyPartName) {

var part = AvGen[bodyPartName];
part.currNr += direction;

...

并称之为：

changePart(-1, "eyes");

或

changePart(-1, "theBody");

另一种方法是简单地将需要更改的身体部位作为第二个参数传递：

function changePart(direction, bodyPart) {
  bodyPart.currNr += direction;

并称之为：

changePart(-1, AvGen.eyes);

Answer 2

您可以将参数传递给“click”事件回调，并检查单击了哪个项目。比用它来传递你想要的'changePart'功能。（您可以阅读单击元素中的一些数据，例如将它们传递给您的函数）

prevEyesBtn.on('click', function(e){

    e.currentTarget; // this is the element that was clicked for example
    if (AvGen.eyes.currEyesNr > 0) {
        changePart(-1);
    }
});

对同一函数使用不同的对象属性

2 个答案: