javascript - jQuery 动画一个类的一个元素的值

Question

当使用类选择某个元素的值时，我无法为它设置动画，相反它会为该类的所有元素设置动画。

$('.class').parent().hover( 
                function() {
                   $({ value: $(this).val() }).animate( .... );
                   ...
                }, function() {
                   $({ value: $(this).val() }).animate( .... );
                   ...
                });

不幸的是，由于我用于创建 slider 的插件，我必须使用 .parent() 选择器，所以我不能使用 ..

$('.parent') -> $('.class', this)

.. 我认为它会解决它。

我有三个具有“.class”类的元素，每当我悬停其中一个时，它们都会显示三个动画。

进一步的解释:html 只是一件事:

<input type="text" value="0" class="class" />

插件在输入上方创建一个 Canvas ，输入用作动画栏的值。它还创建了一个围绕这两个元素的 div。像这样:

<div>
  <canvas>
  <input ... >
</div>

我确信我可以找到一个简单的解决方案，方法是使用 id 并在代码中使用 id 作为选择器多次编写它，但我希望有一种更优雅的方法来解决这个问题。

Here the JSFiddle

Answer 1

只要你知道 <canvas>标签总是会被创建，为什么不直接使用 <canvas>标记作为提供上下文的选择器？

$('canvas').hover( 
    function() {
        var that = $(this);
        $({ value: $(this).next() }).animate(
            ...
            progress: function() {
                that.next().val(Math.round(this.value)).trigger('change');
            }
        );
    }, function() {
        var that = $(this);
        $({ value: $(this).next().val() }).animate(
            ...
            progress: function() {
                that.next().val(Math.round(this.value)).trigger('change');
            }
        );
    });

NEW Working Fiddle