Обновлено несколько слайдеров пользовательского интерфейса jQuery, неправильный слайдер

Question

Я использую ползунок jQuery для создания слайдеров диапазона. При перемещении ползунков обновляется соответствующее текстовое поле ввода.

код JQuery является:

jQuery("form#filterform fieldset.text").each(function(index){ 

     var this_slider = jQuery(this).find("#slider"); 
     $this_slider = jQuery(this_slider); 
     var this_text = jQuery(this).find("input"); 
     $this_text = jQuery(this_text); 

     var this_output = new jQuery(this).find("span#current"); 
     $this_output = jQuery(this_output); 

     $this_slider.empty().slider({ 
      range: true, 
      min: 0, 
      max: 100, 
      values: [0, 100], 
      slide: function(event, ui) { 
      $this_text.val(ui.values[0] + ' - ' + ui.values[1]); 
      } 
     }); 
     $this_text.val($this_slider.slider("values", 0) + ' - ' + $this_slider.slider("values", 1)); 
}); 

Проблема заключается в том, все ползунки обновить значение последнего сгенерированного ползунка. Кто-нибудь может обнаружить проблему в приведенном выше коде?

Answer 1

По какой-то причине вы дублируете все свои переменные с их версией $ (, хотя все они являются объектами jquery).

Вы используете эти версии в функции обратного вызова, и поскольку они не объявлены с использованием var, они являются глобальными. поэтому все они указывают на одно и то же .. (именно последний определен)

вы должны изменить

var this_slider = jQuery(this).find("#slider"); 
    $this_slider = jQuery(this_slider); 
    var this_text = jQuery(this).find("input"); 
    $this_text = jQuery(this_text); 

    var this_output = new jQuery(this).find("span#current"); 
    $this_output = jQuery(this_output); 

в

var $this_slider = jQuery(this).find("#slider"); 
    var $this_text = jQuery(this).find("input"); 
    var $this_output = jQuery(this).find("span#current"); 

и он будет работать ..