jQuery：根据更改的变量值更改div文本

Question

我需要为网站创建捐赠页面。基本上我希望用户使用滑块来选择他们希望捐赠的金额。我已经使用下面的教程来创建一个基本的滑动条 - http://designm.ag/tutorials/howto-build-range-slider-input-with-jqueryui/。

<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来做到这一点？

Answer 1

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

希望这有助于。