如何在 jQuery 中选择输入范围内的值

How to select the value in an input range in jQuery

本文关键字：输入 范围内 选择 jQuery      更新时间：2023-09-26

嗨，我有一个时间线，当按下按钮时会更改内容 将加载新内容。

我想尝试改变这种方法，使其更具交互性。我想象一张 HTML 幻灯片，当达到值时，显示和隐藏就会被激活。

下面是我当前更改内容的结构的示例。但是，我不能100%确定我应该如何处理这样的任务。

我想我最有价值的问题最终将帮助我形成我的脚本是如何在滑块中选择某个值。

如果有人能

为我指出正确的方向，或者如果有人能给我看一个工作的例子，那就太好了。

欢迎任何帮助和建议。

代码在下面或查看 jsFiddle

实现显示和隐藏旧

样式的示例JS代码（这显示了我使用的旧按钮以及它如何与页面中的其他元素交互，正如您在单击按钮元素时看到的那样显示和隐藏。我想用范围滑块来实现这一点。

$('#2003btn').on('click', function () {
    //hide elements
    $('.most_popular_contents').hide();
    $('.newsrotator').slideUp('fast');
    //specify rotator
    myRotator('#newsrotator2');
    //show elements
    $('.year2003').slideDown('fast');
    $('.news_content_2003').fadeIn('medium');
});});

我尝试过的示例：

$('p').hide();
if ( $('range').val() = '2004' ) {
$('p').show();
}

要使用的示例 HTML 滑块：

<div id="page-wrap">    
<form>
<div>
<input id="year_range" name="sue" type="range" min="2003" max="2013" value="2003" step="1" style="width: 100%;"/>
<output for="year"></output>
</div>
</form>    
</div>

绑定该范围元素以更改事件。

.JS：

var slider = $('#year');
slider.change(function() {
    var newValue = parseInt($(this).val());
    if(newValue == 2004) {
        $('p').show();
    }
});

在此处查看工作演示。

相关文章：