jQuery:根据更改的变量值更改div文本
我需要为网站创建捐赠页面。基本上我希望用户使用滑块来选择他们希望捐赠的金额。我已经使用下面的教程来创建一个基本的滑动条 - http://designm.ag/tutorials/howto-build-range-slider-input-with-jqueryui/。jQuery:根据更改的变量值更改div文本
<div id="defaultval">
Slider Value: <span id="currentval">0</span>
</div>
<div id="defaultslide"></div>
上述代码取自教程并显示滑块。在span标签为用户currentval“的值更改改变滑块的位置,如在本教程http://designm.ag/previews/jqueryui-range-sliders/
jQuery的用于滚动条的现场演示如下:
<script>
$(function(){
$('#defaultslide').slider({
max: 250,
min: 0,
value: 0,
slide: function(e,ui) {
$('#currentval').html(ui.value);
}
});
</script>
然后我在下面有一个div,我希望根据滑动条的值显示描述不同的perk的文本。例如。如果滑块值> 100显示振作1,滑块值> 200显示振作2等等
<div id="perk">
<span>"Perk number..."</span>
</div>
我不得不周围试图做到这一点一出戏,但我已经没有运气好的话,只有这样我才能想到做它如下:
if($value > 100) {
$('#perk span').text('Perk number 1');
}
显然这是不正确的。我将如何使用jQuery来做到这一点?
变量$value
中包含的值在您提供的代码中不明确。
您应该尝试从滑块本身查找val()
或.value
。
编辑:我找到了解决方案!从查看教程的源代码,我发现滑块的值存储在slide: function(e,ui)
范围内的名为ui.value
的变量中。简单地调用,如:
if(ui.value > 100) {
$('#perk span').text('Perk number 1');
}
做幻灯片功能中,像如下:
$('#defaultslide').slider({
max: 1000,
min: 0,
value: 500,
slide: function(e,ui) {
if(ui.value > 100) {
$('#perk span').text('Perk number 1');
};
}
});
希望这有助于。
因为我没有创建滑块我不知道如何获取值。我希望有更有经验的人能够帮助我做到这一点@seanlevan – 2015-02-08 02:08:04
当然,我编辑的答案反映了这一点。 :)我希望有所帮助,并随时将其标记为正确的答案,并在旁边有复选标记,如果确实如此。 :) – seanlevan 2015-02-08 02:09:51
工作就像一个魅力!非常感谢@seanlevan – 2015-02-08 02:12:46
'$ value'输出什么?尝试提醒值... – 2015-02-08 01:59:46