Question

我正在使用inview.js和knobs.js插件来创建动画旋钮图表。我正在使用以下代码为旋钮设置动画：

jQuery('.knobchart').bind('inview', function (event, visible) {
if (visible == true) {
    jQuery(this).knob();
    jQuery({
        value: 0
    }).animate({
        value: jQuery(this).attr("rel")
    }, {
        duration: 5000,
        easing: 'swing',
        step: function () {
            jQuery(this).val(Math.ceil(this.value)).trigger('change');
        }
    })


} else {

$(this).val(0);

}
});

旋钮的标记如下所示：

<input data-readonly="true" class="knobchart" rel="999" value="0">

问题是在动画的步骤函数中指定

jQuery(this)

选择器什么都不做。我尝试将其更改为

'.knobchart'

，然后将所有旋钮设置为相同的值。

编辑：已解决 @Gaby的方法非常出色......

Answer 1

当你知道它指向的位置时，你应该将this存储到变量中，并使用该变量而不是this ..

jQuery('.knobchart').bind('inview', function (event, visible) {
    var self = this; // <-- added this line, and using self from now on in this method
    if (visible == true) {
        jQuery(self).knob();
        jQuery({
            value: 0
        }).animate({
            value: jQuery(self).attr("rel")
        }, {
            duration: 5000,
            easing: 'swing',
            step: function () {
                jQuery(self).val(Math.ceil(this.value)).trigger('change');
            }
        });

    } else {
        $(self).val(0);
    }
});

这是必需的，因为您不为元素设置动画，而是为对象设置动画。

http://jsfiddle.net/2h8mF/1/

演示

Answer 2

为什么不使用$但jQuery？您可以尝试在每个循环中执行此操作，这可能不太常见：

$('.knobchart').each(function() {
    var el = $(this);
    el.bind('inview', function (event, visible) {
        if (visible == true) {
            el.knob();
            $({
                value: 0
            }).animate({
                value: el.attr("rel")
            }, {
                duration: 5000,
                easing: 'swing',
                step: function () {
                    el.val(Math.ceil(this.value)).trigger('change');
                }
            })


        } else {

            el.val(0);

        }
    });
});

但有一个问题：线条是什么

jQuery({
        value: 0
    }).animate({
        value: jQuery(this).attr("rel")
    }, {
        duration: 5000,
        easing: 'swing',
        step: function () {
            jQuery(this).val(Math.ceil(this.value)).trigger('change');
        }
    })

做什么？看起来不对我

Answer 3

我发现了两个问题。

jQuery({value: 0}).animate(...)不是有效的陈述，您需要为this
在this处理程序中使用step，您需要使用$.proxy()将自定义上下文传递给回调方法

代码

jQuery('.knobchart').bind('inview', function (event, visible) {
    if (visible == true) {
        jQuery(this).knob();
        jQuery(this).animate({
            value: jQuery(this).attr("rel")
        }, {
            duration: 5000,
            easing: 'swing',
            step: $.proxy(function () {
                jQuery(this).val(Math.ceil(this.value)).trigger('change');
            },this)
        })
    } else {
        $(this).val(0);
    }
});

$（这个）选择器工作错误

3 个答案: