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，我希望根据滑块的值显示描述不同特征的文本。例如。如果滑动条值> 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。

编辑：我找到了解决方案！通过查看教程的源代码，我发现滑块的值存储在ui.value范围内的slide: function(e,ui)变量中。简单地称之为：

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

希望有所帮助。

jQuery：根据变化的值改变div文本

1 个答案: