Question

也许我的问题很愚蠢并且有一个非常简单的答案，但我是HTML和JavaScript的新手，我需要你的帮助。实际上是我创建的第一个网站......

嗯，我的问题是这个。我的网站上有2个链接

<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link</button></a>

<a id="second" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>

最初，我需要显示第一个链接按钮，当点击链接按钮消失时，应显示“正在检查...”的消息10秒钟，然后出现第二个链接按钮。

所以这3个元素（按钮1，消息，按钮2）中的每一个都应该逐个可见......

我不知道它是否有帮助，但我在我的网站上使用jquery-1.10.2.js。

你们有没有人可以帮我解决一下？

提前谢谢！

Answer 1

这样的东西？这是纯粹的javascript。

＆＃13;

first.onclick = (function(){

  first.style.display = "none"
  
  second.style.display = "block"
  
  setTimeout(function(){
  
     second.style.display = "none"
    
     third.style.display = "block"
    
  },5000)
  
})

＆＃13;

#second, #third {
 display: none
}

＆＃13;

<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link Click me</button></a>

<span id="second">.... Wait 5s</span>

<a id="third" href="#">YOUR LINK</a>

＆＃13;

Answer 2

只需拥有页面中的所有元素，然后根据您的流程显示/隐藏。

＆＃13;

$('#first').on('click', function() {
  $(this).hide();
  $('#message').show();
  setTimeout(function() {
    $('#second').show();
    $('#message').hide();
  }, 10000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link</button></a>
<p id="message" style="display:none;">Checking...</p>
<a id="second" style="display:none;" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>

＆＃13;

Answer 3

您可以通过向容器元素添加州类来更改所有3个按钮。

CSS ：

中的

仅在空状态（无类别）

#first

仅在loading...州

loading

仅在#third州

ready

然后，在 JavaScript 中，您需要做的就是添加\删除正确的类：

first.onclick = (function() {
  container.classList.add('loading');

  return setTimeout(function() {

    container.classList.remove('loading');
    container.classList.add('ready');

  }, 5000);

});

.action-container:not(.loading) #second,
.action-container:not(.ready) #third {
  display: none
}

.action-container.loading #first,
.action-container.ready #first {
  display: none;
}

<div class="action-container" id="container">
  <a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link Click me</button></a>

  <span id="second">.... Wait 5s</span>

  <a id="third" href="#">YOUR LINK</a>
</div>

Answer 4

使用jQuery，这也是一种可能的方式：

$('#first').on('click', function() {
  // Parent Element of the first button
  var parent = this.parentElement;
  
  // Show message
  $(parent).append('<p>Checking...</p>')
  
  // Remove first button
  $(this).remove();
  
  // Set html content of parent including only the second button (after 1 second)
  setTimeout(function() {
    $(parent).html('<a id="second" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>');
  }, 1000)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a id="first" href="#" target=""><button class="btn-icon btn-icon-check">First Link</button></a>

单击后如何更改链接延迟

4 个答案: