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

Question

I need to create a donations page for a website. Basically I want the user to use a slider bar to select the amount they wish to donate. I have used the following tutorial to create a basic slider bar - 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>

The above code is taken from the tutorial and displays the slider bar. The value in the span tag 'currentval' changes as the user changes the place of the slider, as seen in the live demo of the tutorial http://designm.ag/previews/jqueryui-range-sliders/

The jQuery used for the slider bar is as follows:

<script>
$(function(){
  $('#defaultslide').slider({ 
    max: 250,
    min: 0,
    value: 0,
    slide: function(e,ui) {
      $('#currentval').html(ui.value);
    }
  });
</script>

I then have a div below where I wish to display text describing a different perk depending on the value of the slider bar. Eg if the slider bar value > 100 display perk 1, slider bar value > 200 display perk 2 etc...

<div id="perk">
   <span>"Perk number..."</span>
</div>

I've had a play around trying to do this but I've had no luck, the only way I can think of doing it is as follows:

if($value > 100) {
    $('#perk span').text('Perk number 1');
}

Obviously this is incorrect. How would I do this using jQuery?

Answer 1

What the value in the variable $value contains is not clear from the code you provided.

You should be attempting to find the val() or .value from the slider itself.

Edit: I found the solution! From looking at the source code of the tutorial, I found that the value of the slider is stored in a variable called ui.value within the scope of slide: function(e,ui) . Simply call that, as in:

if(ui.value > 100) {
    $('#perk span').text('Perk number 1');
}

do it within the slide function, like as follows:

  $('#defaultslide').slider({ 
    max: 1000,
    min: 0,
    value: 500,
    slide: function(e,ui) {
      if(ui.value > 100) {
       $('#perk span').text('Perk number 1');
     };
    }
  });

Hope that helped.