Question

这是一个相当新的问题：测试一个简单的函数，它在悬停时淡出并在mouseout上淡入淡出。正在玩参数所以请原谅这怎么没有多大意义，但我只是想在参数中使用'opacity'而不是硬编码（再次，只是为了理解事情）。这是我的代码：

$.fn.hoverImage = function(property) {
    //add event handler for each image (otherwise it will add the same event handler for all images all at once)
    this.each(function() {
        var img = $(this);
        //hover: first function is for mouseover, second is on mouseout
        img.hover(function() {      
            img.animate({
                property:0
            }, 200);
        }, function() {
            img.animate({
                property:1
            }, 200);
        });
    });
}

我称之为：

$('.project-img').hoverImage('opacity');

如果我在参数中将不透明度写为字符串它不起作用，如果我不将它放在字符串中，我会收到此错误：

未捕获的ReferenceError：未定义不透明度

只想知道原因。如果我在插件中使用opacity这个词，它确实有效，只是为了澄清这一点。感谢。

Answer 1

代码

{property: 0}

使用名为property的属性创建一个对象，其值为0。特别是，它不查找名为property的变量，并将其用作属性名称。如果你想这样做，你必须打破它：

var obj = {};
obj[property] = 0;
/* use obj */

将此与使用obj.property进行比较，property也不会使用{{1}}变量。

Answer 2

您需要使用bracket notation作为member operator，因为您的属性键存储在变量中

$.fn.hoverImage = function (property) {
    //add event handler for each image (otherwise it will add the same event handler for all images all at once)
    this.each(function () {
        var img = $(this);
        //hover: first function is for mouseover, second is on mouseout
        img.hover(function () {
            var opts = {};
            opts[property] = 0;
            img.animate(opts, 200);
        }, function () {
            var opts = {};
            opts[property] = 1;
            img.animate(opts, 200);
        });
    });
}

演示：Fiddle

简单查询一个非常小的jQuery插件

2 个答案: