Javascript: Timed href Änderung

Question

Ich habe ein kleines Javascript Problem im Moment, ich hoffe, das Bild unten haben eine Variable HREF, die durch eine Zeitänderung ausgelöst wird.

Momentan löst es zwar aus, aber dann bleibt es bei einer der URLs hängen. Es wirkt sich auch auf ein Bild aus, das über diesem Bild liegt. Welches ist überhaupt nicht das Ziel!

Jede Hilfe wäre großartig. Vielen Dank.

<div style="position: absolute; left: 0; top: 0; z-index: 100"><a href="[VARIABLE  URL]"><img src="[BACKGROUNDIMAGE]" style="position: absolute top: 0; left: 0;"/></a></div> 

<script type="text/JavaScript"> 

setTimeout(hyperlink1,3000); 
setTimeout(hyperlink2,3000); 
setTimeout(hyperlink3,3000); 

function hyperlink1() { 
$("a").attr("href", "[URL1]") 
} 

function hyperlink2() { 
$("a").attr("href", "[URL2]") 
} 

function hyperlink3() { 
$("a").attr("href", "[URL3]") 
} 

</script> 

Answer 1

Ihre Wähler, "a", werden alle a Elemente auf der Seite anzeigen lassen. Das bedeutet, dass alle drei Ihrer Funktionen, die alle nach ungefähr drei Sekunden ausgelöst werden, alle Links auf die gleiche URL ändern.

Sie müssen jeden Selektor für den Link, den er ändern wird, festlegen. Sie können mit id s auf die Links tun, oder durch ihre (original) href oder ein class usw. verwendet

Beachten Sie auch, dass alle drei Ihrer Funktionen bei gleichzeitig fast genau gefeuert werden. Wenn das Ihr Ziel ist, verwenden Sie nur eine einzige Funktion, um alle Aktualisierungen durchzuführen. Wenn Ihr Ziel ist ein Feuer zu haben, dann neben dem, dann dem nächsten, entweder verketten sie:

setTimeout(hyperlink1,3000); 

function hyperlink1() { 
    $("a").attr("href", "[URL1]") 
    setTimeout(hyperlink2,3000); 
} 

function hyperlink2() { 
    $("a").attr("href", "[URL2]") 
    setTimeout(hyperlink3,3000); 
} 

function hyperlink3() { 
    $("a").attr("href", "[URL3]") 
} 

... oder eine einzelne Funktion verwendet werden, die durch eine Reihe geht. Es hängt davon ab, wie komplex die echten Funktionen sein werden und ob Sie versuchen, immer nur einen Link zu aktualisieren oder eine Reihe von Links einzeln zu aktualisieren.

Wenn Sie nur den einen Link, und Sie versuchen, es einfach immer wieder zu aktualisieren, können Sie nur ein Array wie folgt laufen:

function update() { 
    var index = 0, 
     urls = [ 
      "/path/to/first", 
      "/path/to/second", 
      "/path/to/third" 
     ]; 
    setTimeout(tick, 3000); 

    function tick() { 
     var href = urls[index++]; 
     if (href) { 
      $("a").attr("href", href); 
      if (index < urls.length) { 
       setTimeout(tick, 3000); 
      } 
     } 
    } 
} 
update(); 

... aber wenn es wirklich nur die drei, die Sie hab aufgelistet, naja, die drei funktionen verkettet via setTimeout ist knapp und übersichtlich. Prägnant und klar sind gute Dinge ^(tm).

Answer 2

Ich denke, dass Sie die von einer URL zu anderen nach 3 Sekunden ändern möchten. Versuchen Sie unten,

var timer = setInterval(hyperlink,3000); 
var ptr = 0; 
var urls = ['URL1', 'URL2', 'URL3']; 

function hyperlink() { 
    if (ptr == url.length) { 
     clearInterval(timer); 
     ptr = 0; 
     return; 
    } 
    $("a").attr("href", urls[ptr++]) 
} 

Answer 3

Alle Ihre Timeouts feuern nach der gleichen Zeit (etwa drei Sekunden). Das macht eine Ihrer drei URL-Funktionen "gewinnen", wie es als der letzte von drei aufgerufen wird, innerhalb der sehr kurzen Zeitspanne der Verarbeitung des Timeout und der Ausführung Ihrer Funktionen.
Höchstwahrscheinlich wird die letzte Funktion diejenige sein, deren URL gesetzt wird.
Wenn Sie wollen, dass die Änderungen zyklisch sein, das Sie so etwas tun sollte:

<script type="text/JavaScript"> 
hyperlink(0); 
function hyperlink(urlCounter) { 
    if (urlCounter > 3) { 
     urlCounter = 0; 
    } 
    var url = ""; 
    switch (urlCounter) { 
     case 0: 
      url = "[URL 1]"; 
     break; 
     case 1: 
      url = "[URL 2]"; 
     break; 
     case 2: 
      url = "[URL 3]"; 
     break; 
    } 
    setTimeout(function() { 
     $("a").attr("href", url) 
     urlCounter++; 
     hyperlink(urlCounter); 
    }, 3000); 
} 
</script>