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

Question

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

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

下面是我当前更改内容的结构的示例。然而，我并不是 100% 确定我应该如何完成这样的任务。

我认为最有值(value)的问题最终将帮助我形成我的脚本是如何在 slider 中选择某个值。

如果有人可以为我指出正确的方向，或者如果有人可以向我展示一个可行的示例，那就太好了。

欢迎任何帮助和建议。

代码如下或查看jsFiddle

实现显示和隐藏旧样式的示例 JS 代码(这显示了我使用的旧按钮以及它如何与页面中的其他元素交互，正如您在单击按钮时看到的元素被显示和隐藏一样。我希望通过范围 slider 来实现这一点。):

$('#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 slider 示例:

<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>

Answer 1

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

JS:

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

查看工作演示 here .