如何将对象从 jquery 传递到 javascript

Question

我想使用选择器将一个对象从 jquery 传递给一个 javascript 函数，如下所示。

flash($("#something span"), "#fff", 250);

但它似乎不起作用。

我不确定要在 javascript 函数中添加什么。 我现在做的是：

function flash(obj,color1,color2,duration) {
    obj.animate({backgroundColor:color1},duration);
    setTimeout(function(){this.animate({backgroundColor:color2},duration);},duration);
}

或者还有其他方法可以代替传递对象吗？例如，在 jquery 中： $("this").flash("#f79999", "#eee", 250);

那么如何定义javascript函数呢？

Answer 1

你有一个简单的语法错误。

ojb.animate({backgroundColor:color},duration);

应该是

obj.animate({backgroundColor:color},duration);

Answer 2

您必须包含jQuery.Color 插件才能为background-color 等属性设置动画。

来自“Animation Properties and Values:”

所有动画属性都应该被动画化为一个单个数值，除非下面提到；大多数非数字属性无法使用基本 jQuery 功能进行动画处理（例如，width、height 或 left 可以进行动画处理但 background-color 不能，除非 jQuery.Color()使用插件）。 [...]

---

除了传递对象之外，还有其他方法吗？例如，在 jquery 中： $("this").flash("#fff",250);

jQuery 的Plugins/Authoring 应该对此有所帮助。但是，您可以将其定义为：

jQuery.fn.flash = function (color, duration) {
    return this.animate({ backgroundColor: color }, duration);
};

$('#something span').flash('#fff', 250);

Answer 3

在页面中安装了jQuery.Color 插件（确认。@Jonathan Lonowski）...

您可以通过使用 javascript 的 .call() 或 .apply() 来避免传递对象。

这是一个例子：

$(function() {
    function flash(color, duration) {
        this.animate({backgroundColor:color}, duration);
    }
    $("#something span").on('click', function() {
        flash.call($(this), "#fff", 250);
    });
    $("#something_else span").on('click', function() {
        flash.apply($(this), ["#fff", 250]);
    });
});

.call() 和 .apply() 在这里并不是必需的；常规函数调用就足够了。

.call() 和.apply() 通常用于需要调用一个对象的方法但为其提供另一个对象的上下文的情况。通过这样做，该方法可以在不同的this 上运行。