Question

我需要使用单个jQuery调用来计算new并编辑SVG元素（rect）的'x'和'y'属性。

现在我知道你可以这样做：

var incBy = 20;

$('#test').attr('x', function(i, val) {
    return parseInt(val) + incBy;
});

适用于计算和编辑单个属性，但如何以这种方式编辑多个属性？

Answer 1

您可以尝试使用jQuery的attr方法使用地图。

$('#test').attr(
        {'x': editValue,
         'y': editValue
        });
function editValue(i, val) {
   return parseInt(val) + incBy;
};

Answer 2

var incBy = 20;

$('#test').each(function () {
    this.x += incBy;
    this.y += incBy;
});

或者，更优雅的是，如果你想修改数千个对象，也会有更高的性能）

$.fn.extend({
  modCoordsBy: function(amount) {
    for (var i=0, j=this.length; i<j; i++) {
      this[i].x += amount;
      this[i].y += amount;
    }
    return this;
  }
});

$('#test').modCoordsBy(20);

根据您的需要，将范围检查或类型测试应用于x和y。

Answer 3

我不确定如何在多个属性上执行此操作，但如果您正在寻找防止重复代码的方法，则可以重构匿名函数。

$('#test').attr('x', myFunction);
$('#test').attr('y', myFunction);

function myFunction(i, val) {
    return parseInt(val) + incBy;
}

Answer 4

如果您将其考虑在内，您也可以在一行中完成：

$('#test').attr('x', myFunction).attr('y', myFunction);

function myFunction(i, val) {
  return parseInt(val) + incBy; 
}

或者将其抽象出来，并将要应用于

的属性传递给单独的函数

process('x', 'y');

function process() {
  for (var i = 0; i < process.arguments.length; i++)
    $('test').attr(process.arguments[i]), myfunction);

  function myFunction(i, val) {
    return parseInt(val) + incBy; 
  }
}

这取决于你想走多远。您可以在参数中包含要调用的函数，也可以包括选择条件。

在单个jQuery调用中计算和编辑多个属性

4 个答案: