logo标签列表

从Javascript获取值到隐藏输入框

javascriptinputprototypejshidden-fieldscriptaculous
4

我只是尝试在这个JavaScript代码中添加代码，以获取幻灯片的值并将其传递到input type="hidden"中，但我无法将值传递到input type="hidden"中，我做错了什么？不管怎样，感谢您的帮助！

以下是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>
1
它正在工作 - http://jsbin.com/ubazod/2/edit。你为什么说它不是？ - Diode
双重检查确保您只有1个带有ID“percentage”的元素，可能在onChange、onSlide事件中添加console.log（）以确认获取的值。设置元素值的另一种方法是使用setValue()，例如$('percentage').setValue(Math.round(v * 100) + '%');。 - Geek Num 88
@Geek Num 88，是的，你说得对，那是一个很好的提示，可以开始寻找在JavaScript中添加价值的方法，所以我找到了如何在JavaScript中添加价值，现在它也可以正常工作了。非常感谢你的提示！ - Davy Says
3个回答
0

你应该使用 $('#percentage') 而不是 $('percentage')

@tracevipin 是的，它可以工作，但那不是我的意思。我想要将滑块的值获取到<input type="hidden" value="这里的值">中。 - Davy Says
不，那没关系，因为正如您所看到的，在其他id =“”中它是可以工作的，而且我之前已经尝试过了。 - Davy Says
尝试使用.val而不是.value。 - mrida
我已经尝试过了，但它没有起作用。我之前添加了 "$('percentage').value = Math.round(v * 100) + '%';"，但那也不起作用。 - Davy Says
0

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

你需要的是DOM元素，而不是jQuery对象。

或者，可以使用 $('#percentage').val('')

是的，这不是jQuery。我对Scriptaculous没有太多经验，但我想将值发送到隐藏的输入框以获取该值。你能展示一下如何实现以及在哪里放置吗？谢谢。 - Davy Says
请使用您提供的脚本，只需将$('percentage').value = Math.round(v * 100) + '%'; 替换为$('#percentage')[0].value = Math.round(v * 100) + '%'; - Oskar Skuteli
抱歉，我搞错了，以为是jQuery的$。看起来你的脚本已经正确了... - Oskar Skuteli
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接