1

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

我想尝试改变这种方法，使其更具交互性。我想象一个 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>
4

1 回答 1

1

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

JS：

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

在此处查看工作演示。

于 2013-10-29T12:46:50.987 回答