$ (this) selector working awry

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'

, но затем все кнопки получают анимированные значения.

EDIT: ПОСТАНОВИЛИ метод @Gaby «s работает блестяще ...

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? Вы могли бы попытаться сделать это в пределах каждого цикла, который не может быть слишком perfomant:

$('.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

Были две проблемы, которые я нашел.

1. jQuery({value: 0}).animate(...) не является допустимым заявление, вам необходимо анимировать текущий элемент, который this
2. Использование 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); 
    } 
});