Wie erstellt man einen JavaScript-Bereichsschieberegler mit Links?

Question

Ich habe eine Liste von Zahlen wie folgt aus:

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

Was ich tun möchte, ist diese Liste als JavaScript (Bereich) Schieber zu zeigen. Wie Sie sehen können, hat jede Nummer einen Link.

Was soll ich tun, um den Schieberegler aufzulisten, ohne die Verknüpfungsfunktion zu verlieren?Ich meine, wenn eine Nummer auf dem Schieberegler ausgewählt (warten Sie 2 Sekunden), dann gehen Sie zum Link mit dieser Nummer.

Answer 1

Alles, was Sie brauchen, ist ein Slidestop-Event, etwas ähnliches.

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

für die Wartezeit 2 Sekunden, bevor Sie die Seite zu ändern, verwenden setTimeout(function(){ // code}, 2000);

Hofft es hilft!

• Nic

P. S. Ich nahm an, dass Sie Jquery-UI verwenden. Hier

Answer 2

ist ein Beispiel zu createElement("a"); und Sie können Attribute für den generierten Link

Hinweis eingestellt: Links zur Verfügung 0-100.

$("#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(); 
 
}

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