从Javascript获取值到输入类型隐藏

时间:2013-06-01 17:37:08

标签: javascript input prototypejs hidden-field scriptaculous

我只是想在这个javascript中添加代码来获取幻灯片的值到输入类型=“隐藏”,但是我无法将值输入输入类型=“隐藏”,我该怎么办?无论如何,谢谢你的帮助!

这是javascript代码:

// <![CDATA[
var hWidth, bWidth;

function setBgPos(v) {
    var off = v * hWidth;
    var pos = -bWidth + (v * bWidth);
    $('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'});
}

function setSlideOutput(v) {
    $('percent').innerHTML = Math.round(v * 100) + '%';
}

Event.observe(window, 'load', function() {
    hWidth = $('slider-handle').getWidth();
    bWidth = $('slider-bar').getWidth();
    var slide = new Control.Slider('slider-handle', 'slider-bar', {
        sliderValue: 0.25,
        onSlide:
            function(v) {
                setBgPos(v);
                setSlideOutput(v);
                $('percentage').value = Math.round(v * 100) + '%';
            },
        onChange:
            function(v) {
                setBgPos(v);
                setSlideOutput(v);
                $('percentage').value = Math.round(v * 100) + '%';
            }
    });
    setBgPos(slide.value);
    setSlideOutput(slide.value);
});
// ]]>

HTML:

    <!DOCTYPE html>
    <html lang="nl">
    <head>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
<style>
#slider, #slider-bar, #slider-handle {
    border: 0;
    padding: 0;
    margin: 0;
}
#slider {
    width: 300px;
    height:42px;
    background: url(img/bg.gif) no-repeat -300px;
    margin-left: 42px;
}
#slider-bar {
    width:300px;
    height:42px;
    background: url(img/track.png) no-repeat;
}
#slider-handle {
    width:42px;
    height:42px;
    cursor:move;
    background: url(img/gripper.png) no-repeat;
}
#percent {
    font-size: 75%;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    padding-top: 1.1em;
}
</style>
    </head>
    <body>
    <div id="slider">
    <div id="slider-bar">
    <div id="slider-handle"><p id="percent"></p></div>
    </div>
    </div>
    <input type="hidden" id="percentage" name="percentage" value="0" />
    </body>
    </html>

3 个答案:

答案 0 :(得分:0)

您应该使用$('#percentage')代替$('percentage')

答案 1 :(得分:0)

尝试使用$('#percentage')[0].value

你需要的是DOM元素,而不是jquery对象。

或者,使用$('#percentage').val('')

答案 2 :(得分:0)

更新解决了添加setvalue的问题,这对我有帮助:http://www.ruby-forum.com/topic/143329。感谢所有小贴士,感谢Geek Num 88!