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