2

在使用类选择某个元素的值时，我无法为某个元素的值设置动画，而是会为该类的所有元素设置动画。

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

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

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

..我认为它会解决它。

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

进一步解释： html 只是一件事：

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

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

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

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

这里是 JSFiddle

4

2 回答 2

2

只要你知道<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');
            }
        );
    });

新的工作小提琴

于 2013-10-24T02:23:41.350 回答
0

也许尝试将其包装在事件侦听器中：

$(function(){
    $('.class').on('hover',function(){
        $({value:$(this).parent().val()}).animate( ...)
    })
});
于 2013-10-24T00:21:08.590 回答