PHP页面加载后,我无法动态更改javascript中的值

问题描述:

In my code below, I want to change the initial value with a slider. The slider works and everything, but it's not changing the values of the timeout, shown under the $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({ line.

The value of slider in the line $('#ex1').on('slide', function(slider) is equal to the value of the input-form attribute data-slider-value which is 100.

Now, when I start to adjust the input slider, it will change the attribute from its initial value of 100 to whatever the user slides to.

But the problem is, the slider won't change the values inside the jquery code...


So to make it more clear:

In the JS code, the variable 'value' is declared, but not yet initialized to a value.

The variable 'value' is then assigned to 'slider.value'

And so the logical conclusion is that the 'timeout' variable should change dynamically, according to the values inputted by the slider.

<!-- 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>

在下面的代码中,我想用滑块更改初始值。 滑块工作正常,但它没有改变 $ code>的值,显示在 $('ul。&lt;?php echo $ this-&gt; session-&gt; userdata( 'username');?&gt;')。innerfade({ code> line。 p>

$中 slider code>的值 '#exl')。on('slide',function(slider) code>等于input-form属性 data-slider-value code>的值,即100。 p >

现在,当我开始调整输入滑块时,它会将属性从其初始值100更改为用户滑动到的任何值。 p>

但是 问题是,滑块不会更改jquery代码中的值... p>


所以要更清楚: p> \ n

在JS代码中,声明变量'value',但尚未初始化为值。 p>

然后将变量'value'分配给'slider.value' p>

所以逻辑结论是'timeout'变量应该根据sl输入的值动态变化 ider。 p>

 &lt;! - 开始滑块 - &gt; 
&lt; p&gt; 
&lt; 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”/&gt; 
&lt; / p&gt;  ; 
 
&lt; script type =“text / javascript”&gt; 
 $(document).ready(
 function(){
 var value; 
 
 $('#ex1')。slider(  ); 
 $('#ex1')。on('slide',function(slider)
 {
 value = slider.value; 
}); 
 
 $('ul。&lt;?  php echo $ this-&gt; session-&gt; userdata('username');  ?&gt;')。innerfade({
 speed:0,
 timeout:value,
 type:'sequence',
 containerheight:'480px'
}); 
}); 
&lt; / 脚本&gt; 
  code>  pre> 
  div>

It's normal, your animation is already made. Your have to remake your animation or better, change the option.

edit :

There is the idea (not sure if is the correct syntax) :

//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;

You cant because the innerfade function runs before the on('slide'). On sliding you should call a function that sets the innerfade like this.

$(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'
    });
}

The slide function will get 2 args: event and ui. The value of the slider is in the ui object, so I would try this:

$('#ex1').on('slide', function(event, ui) {
    value = ui.value;
});

as documented here:

http://api.jqueryui.com/slider/#event-slide