Question

我有一个这样的数字列表：

<ul class="term-list">
<li class="term-item"><a href="/search?count=1">1</li>
<li class="term-item"><a href="/search?count=2">2</li>
<li class="term-item"><a href="/search?count=3">3</li>
<li class="term-item"><a href="/search?count=4">4</li>
<li class="term-item"><a href="/search?count=5">5</li>
<li class="term-item"><a href="/search?count=6">6</li>
</ul>

我想要做的是将此列表显示为 JavaScript （范围）滑块。如您所见，每个号码都有一个链接。

如何在不丢失链接功能的情况下将滑块应用于列表？ 我的意思是如果在滑块上选择了一个数字（等待2秒），那么请转到此链接号。

Answer 1

你需要的只是一个幻灯片活动，就像那样。

$(document).ready(function(){
    $('.slider').on('slidestop', function(){
        window.location.href = "youpage/count" + $(this).val();
    });
});

如果在更改页面前等待两秒钟，请使用setTimeout(function(){ // code}, 2000);

希望它有所帮助！

尼克

P.S。我假设您使用Jquery-UI。

Answer 2

以下是createElement("a");的示例，您可以为生成的链接设置属性

注意：从0到100的链接。

＆＃13;

$("#link_generator").on("change", function() {
  //wait 2 seconds
  setTimeout(openURL, 2000);

  //or set attributes

  /* var q = $("#link_generator").val();

  setTimeout(function(){

openURL({
  "href":"/search?count="+q,
  "target":"_blank"
  });

},3000); */

});

function openURL(attr) {
  var q = $("#link_generator").val();

  var a = document.createElement('a');
  if (attr) {
    for (var k in attr) {
      a[k] = attr[k];
    }
    return a.click();
  }
  if (q > 0) a.href = "/search?count=" + q;
  a.click();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='link_generator' type='range'>
<br/>

＆＃13;

如何使用链接创建JavaScript范围滑块？

2 个答案: