Question

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

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

以下是我目前更改内容的结构示例。但是，我并不是百分之百确定我应该如何接近这样的任务。

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

如果有人可以指出我正确的方向，或者如果有人可以向我展示一个很棒的工作示例。

欢迎任何帮助和建议。

代码位于下方或查看jsFiddle

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

$('#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>

Answer 1

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

JS：

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

查看有效的演示here。

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

1 个答案: