Несколько ползунков jQuery UI, неправильный ползунок обновлен

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");

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