В моем коде ниже я хочу изменить начальное значение с помощью ползунка. Ползунок работает и все, но он не меняет значения timeout
, показанного под $('ul.<?php echo $this->session->userdata('username');?>').innerfade({
line.
Значение slider
в строке $('#ex1').on('slide', function(slider)
равно значению значения data-slider-value
атрибута атрибута входной формы, которое равно 100.
Теперь, когда я начну настраивать входной слайдер, он изменит атрибут от его начального значения 100 до того, что пользователь скользит.
Но проблема в том, что ползунок не изменит значения внутри кода jquery...
Поэтому, чтобы сделать это более понятным:
В коде JS переменная 'значение' объявляется, но еще не инициализируется значением.
Затем переменной 'value' присваивается значение 'slider.value'
И поэтому логический вывод состоит в том, что переменная "timeout" должна динамически меняться в соответствии со значениями, введенными слайдером.
<!-- Start slider -->
<p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="1000" data-slider-step="1" data-slider-value="100"/>
</p>
<script type="text/javascript">
$(document).ready(
function(){
var value;
$('#ex1').slider();
$('#ex1').on('slide', function(slider)
{
value = slider.value;
});
$('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
speed: 0,
timeout: value,
type: 'sequence',
containerheight: '480px'
});
});
</script>
Это нормально, ваша анимация уже сделана. Вы должны изменить свою анимацию или лучше, измените ее.
редактировать:
Есть идея (не уверен, что это правильный синтаксис):
//make it
var usernameInnerFace = $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
speed: 0,
timeout: value,
type: 'sequence',
containerheight: '480px'
});
//change it
usernameInnerFace.options['timeout'] = new_value;
Вы наклоняетесь, потому что функция innerfade работает до включения ("слайд"). При сдвиге вы должны вызвать функцию, которая устанавливает внутреннюю фрейм как это.
$(document).ready(
function(){
$('#ex1').slider();
$('#ex1').on('slide', function(slider)
{
setFade(slider.value);
});
});
function setFade(value){
$('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
speed: 0,
timeout: value,
type: 'sequence',
containerheight: '480px'
});
}
Функция слайда получит 2 аргумента: событие и ui. Значение ползунка находится в объекте ui, поэтому я бы попытался:
$('#ex1').on('slide', function(event, ui) {
value = ui.value;
});
как описано здесь:
var username = <?php echo json_encode($this->session->userdata('username')); ?>;