Question

目前有一个轻微的Javascript问题，我希望下面的图像有一个由时间变化触发的变量HREF。

目前它在某种程度上触发但随后卡在其中一个URL上。它还影响覆盖在此图像之上的图像。这根本不是目的！

任何帮助都会很棒。谢谢。

<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

您的选择器"a"将匹配页面上的所有a元素。这意味着你的所有三个函数都会在大约三秒后被触发，它们会将所有链接更改为同一个URL。

您需要让每个选择器特定于它将要更改的链接。您可以使用链接上的id或其（原始）href，或使用class等来执行此操作。

另请注意，您的所有三个功能几乎都在同一时间被触发。如果这是您的目标，只需使用一个功能即可完成所有更新。如果你的目标是有一个火，那么下一个，然后是下一个，或者链接它们：

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]")
}

...或使用遍历数组的单个函数。这取决于实际功能的复杂程度，以及您是尝试重复更新一个链接，还是一次更新一系列链接。

如果您只有一个链接，而您只是想重复更新它，那么您可能会像这样走一个数组：

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();

...但如果它真的只是你列出的三个，那么通过setTimeout链接的三个函数简洁明了。简洁明了的是Good Things ^（tm）。

Answer 2

我认为您希望在3秒后将其从一个网址更改为其他网址。请尝试以下，

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

所有超时都会在同一时间（大约三秒钟）后开启。这使得你的三个URL中的一个功能“获胜”，因为它将在处理超时和运行功能的非常短的时间内被称为三个中的最后一个。很可能最后一个函数将是其URL将被设置的函数如果您希望更改是循环的，您应该执行以下操作：

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

Javascript：定时href更改

3 个答案: