在sliderstop上获取当前值并设置cookie

时间:2014-03-26 09:51:27

标签: javascript jquery jquery-ui cookies jquery-ui-slider

我正在使用jQuery UI滑块设置css opactiy,关于如何获取值的api文档,但是当我测试它时,它不会更改元素的不透明度值。

编辑:现在一切正常(发送价值和设置cookie),如果对任何人有任何帮助,我已经更新了以下代码,感谢您的输入人员!

HTML:

<h5>Header Opacity</h5>

<div id="op-slider-header"></div>
<input id="headerOpVal" type="hidden" />

<script type="text/javascript">
// header opacity 
$(function() {

    if ($.cookie('headOp')==null){
        $.cookie('headOp',0.5);

    }
    $('.row.header .bg').css('opacity', $.cookie('headOp'));

    $( "#op-slider-header" ).slider({
        max: 1,
        min: 0,
        value: $.cookie('headOp'),
        step:0.1,
        slide: function(e,ui) {

          $.cookie('headOp',ui.value);
         $('#headerOpVal').html(ui.value);
        }
    });


    $( "#op-slider-header" ).on( "slidestop", function( event, ui ) {
        var val = $('#headerOpVal').html(ui.value);
        $('.row.header .bg').css('opacity', ui.value);
        $.cookie("headOp", ui.value, { expires: 7});
    });
});
</script>

2 个答案:

答案 0 :(得分:0)

我认为您可能必须确保将不透明度设置为整数。试试这个:

var val = parseFloat(ui.value, 10);

您的slidestop事件侦听器中的ui变量是否包含幻灯片值?

答案 1 :(得分:0)

我会使用$('#headerOpVal').attr("value", ui.value);来存储值而不是html。

使用$('#headerOpVal').attr("value");检索值。

但很难说这是问题,也试着发布html。

相关问题