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

希望這有助於。