Не могу повесить Jquery slider на не опр. кол-во элементов

R
На сайте с 03.08.2012
Offline
131
554

Здравствуйте! У меня проблемы.... в БД хранятся записи (неизвестное количество), на странице для каждой записи должен выводится slider (ползунок).

 <div id="ocenka_diets_<?=$count?>" style="display:none;">

<span id="slider-result_eff_<?=$count?>">5.0</span>
<input type="hidden" id="hidden_eff_<?=$count?>" value="5.0"/>
<div id="slider_eff_<?=$count?>" class="slider"></div><br/>

где count = id записи.

Далее следующим образом пытаюсь подключить .slider ко всем элементам...

for(var int = 1; int <= all_count; int++){


$( "#slider_eff_" + int + "" ).slider({animate: true, range: "min", value: 5.0, min: 1.0, max: 5.0, step: 0.1,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
var value = ui.value;
alert(value);
if(value == 1 || value == 2 || value == 3 || value == 4 || value == 5){value = value + ".0";}
$("#slider-result_eff_" + int + "").html( value );
},

//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
var value = ui.value;
if(value == 1 || value == 2 || value == 3 || value == 4 || value == 5){value = value + ".0";}
$("#hidden_eff_" + int + "").attr('value', value);
}
});

}

Где all_count - всего записей, т.е. ползунков. После данного кода работает только сам ползунок, т.е. двигать его можно, но значение его не изменяется, так же остается = 5. Я пробовал писать alert(value), там где должно изменяться значение, при передвижении ползунка оно меняется на нужное, а потом резко назад... что это может быть? как заставить работать все эти ползунки? Буду очень благодарен за помощь!

---------- Добавлено 14.10.2013 в 21:22 ----------

При этом если вместо $("#slider-result_eff_" + int + "").html( value ); ставлю $("#slider-result_eff_2").html( value ); то все нормально работает... что это может быть?(

maggotinaff
На сайте с 13.09.2012
Offline
10
#1

В вашем случае нужно добавить замыкание:


for(var int = 1; int <= all_count; int++){
(function(int){
...
}(int));
}

Т.е. ваш код будет выглядеть примерно так:


for(var int = 1; int <= all_count; int++){
(function(int){
$( "#slider_eff_" + int + "" ).slider({animate: true, range: "min", value: 5.0, min: 1.0, max: 5.0, step: 0.1,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
var value = ui.value;
if(value == 1 || value == 2 || value == 3 || value == 4 || value == 5){value = value + ".0";}
$("#slider-result_eff_" + int + "").html( value );
},

//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
var value = ui.value;
if(value == 1 || value == 2 || value == 3 || value == 4 || value == 5){value = value + ".0";}
$("#hidden_eff_" + int + "").attr('value', value);
}
});
}(int));

}
стабильный доход (http://fx-trend.com/landing/pamm1?agent=502515) уже 2+ года

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий