jQuery text()带加载的方法

时间:2018-01-19 06:12:20

标签: javascript jquery

我尝试创建Logout按钮,但我不知道该使用什么。

如何在几秒钟内将注销文本更改为“等待...”,然后切换到“成功”?

我仍然需要学习jquery。

function logout() {

    $("#logout").text("Waiting...", 3000);
    $("#logout").text("Success!", 1000);
    closeWindow();
}
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('logout').addEventListener('click', logout);

});

HTML:

<button type="button" class="list-group-item" id="logout"> Log out</button>

你能帮助我提供参考资料吗?

我从这篇文章中了解到:W3Schools.com

5 个答案:

答案 0 :(得分:1)

这可能有助于尝试这一点:

gulp.task('_default', function (solutionConfig) {
    if (solutionConfig == "Release") {
        // perform desired task here
    }
    else if (solutionConfig == "Debug" {
        // perform desired task here
    }
});
function logout(){
  $("button").text("waiting...");
  setInterval(sucess,3000)
}
function sucess(){
    $("button").css("background","green");
  $("button").text("successfull");
  clearInterval();
}

$("button").click(logout);
button{
  background:orange;
  border:none;
  color:white;
  padding:20px 20px;
  font-size:20px;
}

答案 1 :(得分:0)

document.addEventListener('DOMContentLoaded' ....不需要&amp; 3秒后,在click按钮更新时显示Success消息。使用setTimeout来引入延迟

function logout() {
  $("#logout").text("Waiting...", 3000);
  setTimeout(function() {
    $("#logout").text("Success!", 1000);
  }, 3000)
}
document.getElementById('logout').addEventListener('click', logout);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="list-group-item" id="logout"> Log out</button>

答案 2 :(得分:0)

使用setTimeout延迟执行某些代码,例如

function logout() {
    $("#logout").text("Waiting...");
    /* using setTimeout delays execution of a code in JavaScript */
    setTimeout(function () {
      /* this code will execute after 3000 miliseconds or 3 seconds */
      $("#logout").text("Success!");
      // closeWindow();
    }, 3000);
}

$('#logout').on('click', logout);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="list-group-item" id="logout"> Log out</button>

答案 3 :(得分:0)

我猜使用 setTimeout 会帮助你延迟并在按钮中显示文字

<强> HTML

<button type="button" class="list-group-item" id="logout"> Log out</button>

<强> JS

$('#logout').click(function() {
    $(this).html('Waiting');
    setTimeout(function() {
      $('#logout').html('Success');
    }, 3000);
});

https://jsfiddle.net/eqymkead/2/

答案 4 :(得分:0)

您必须使用 setTimeout 功能。

请查看代码

$(document).ready(function(){
 //Click Event
 $("#logout").click(function(){
  //Waiting will be here after 1 second
  setTimeout(function(){
    $("#logout").text("Waiting...")
  },1000)
  //Waiting will be here after 3 second
  setTimeout(function(){
    $("#logout").text("Success")
  },3000)
 })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="list-group-item" id="logout"> Log out</button>

每当按钮点击事件将被触发,然后是回调函数。在该函数内部,我编写了以下代码。

setTimeout(function(){
  $("#logout").text("Waiting...")
},1000)

setTimeout函数接受一个调用函数和一个时间参数(以毫秒为单位)我提供1000毫秒后1000毫秒的文本将等待

就像我再次为成功而写的一样。

setTimeout(function(){
    $("#logout").text("Success")
},3000)