如何将按钮文本更改为等待，检查内容更改，然后用jQuery重置按钮文本

我只有最近才开始使用jQuery，因此任何其他指导将始终得到赞赏。如何将按钮文本更改为等待，检查内容更改，然后用jQuery重置按钮文本

我正在尝试向我的网站添加一些漂亮的UI功能，特别是要将单击的按钮文本更改为“等待”以显示该网站正在执行某些操作。如果按钮调用一个页面加载，它会说“等待”，直到下一页加载 - 没问题...但有时一个按钮可能会调用一个弹出窗口模式，用户可以取消并返回页面。因为用户可以返回，所以我需要检查一个弹出模式是否在点击按钮后出现，如果是这样的话，那么改变按钮文本。

此代码适用于我（有点），但当我第二次单击该按钮时，该按钮更改为“等待...”，但不会变回。

这里是一个的jsfiddle试图进一步解释：（恐怕关闭未在小提琴要么使工作我不完全能告诉你） http://jsfiddle.net/BU3SW/3/

这是我的按钮：

<a class="button" href="#">Create</a>

而且我的jQuery：

$('.button').on('click', function() { 
    var $this = $(this), 
     v = $this.html(), 
     s = 'go'; 

     //create a function to reset the text 
     function fix() { 
      $this.html(v); 
      s = 'stop'; 
     } 

    //check we are not clicking on green button 
    if (!$this.hasClass('green')) { 
     //change the text to wait... 
     $this.html('wait...'); 

     //we will use a setInterval to keep checking every second 
     //but only if "s" is still 'go' which means we are still waiting. 
     if (s === 'go') { 
      var intervalId = setInterval(function() { 
       if ($('.modalWrapper').html() !== '') { 
        clearInterval(intervalId); 
        fix(); 
       } 
      }, 1000); 
     } 

    } 

});

预先感谢您。

亲切的问候，请问。

来源

2013-05-17 wf4

在你的真实情况，你有什么事都在等待？通常在jQuery中有回调可以使用，比使用'setInterval'更清洁。 –

我现在的代码只有一个真正的问题，那就是当你点击一个ajax按钮时，你可能需要等待3,5,10秒才能显示HTML部分。在此期间，最终用户可能不知道发生了任何事情。为了避免当模式被取消时不得不重新加载整个页面，我只想做一些事情来切换文本，但只有一次模式在屏幕上。 – wf4

因为你的真实情况，如评论中所述，使用ajax，您应该使用回调，而不是setInterval。

$('.button').on('click', function() { 
    var $this = $(this) 
    $this.html('wait...'); 

    $.ajax({... 
     success: function(){ 
      $this.html("go");   
     } 
    }); 
});

或者是这样的：

$('.button').on('click', function() { 
    var $this = $(this) 
    $this.html('wait...'); 

    $.ajax({...}).done(function(){ 
     $this.html("go"); 
    }); 
});

来源

2013-05-18 21:19:46

你好@詹姆斯蒙塔涅，我很高兴接受这是正确的答案，因为这是正确的方法，不幸的是我不相信它会帮助我在我的情况。我的Ajax请求不包含在按钮点击方法中 - 我真正想要的是一种独立的方式来实现这一点，这就是为什么我最初从未提及过Ajax。我做了一些更改，并设法对第二次点击问题进行排序，一旦完成，我将更新我的帖子，与其他寻找相同内容的人分享我的工作 - 谢谢。 – wf4

斯科特·冈萨雷斯（jQuery开发团队）说：

的.html（）没有一个回调，因为它是同步的，所以任何代码的html的（）调用会后肯定会出现后执行html 已设置。

所以，你只需要写类似

$('.button').on('click', function() { 
    $(this).html("Wait..."); 
    $(".modalWrapper").html("bla bla bla"); 
    $(this).html("initial text"); 
}); 
$('.cancel').on('click', function() { 
    $(".modalWrapper").html(''); 
});

您可以添加一个机制，以检查是否有modalwrapper鸭舌媒体链接打开，和你做。

来源

2013-05-17 16:18:01 TCHdvlp

这是相当无意义的，因为浏览器在功能完成之前不会更新标签。你的'$（this）.html（“Wait ...”）;'会在它被显示之前被替换。 –

嗨@Scott，我从这样的事情开始。在我的jQuery中，我有一个if语句if（s ==='go'）'它检查模式是否打开，但这是我无法完成的工作。第一次工作，但是当我清空模态时，下一次我调用相同的模态时，'等待...'文本就会粘住并且不会恢复。我认为这与clearInterval有关，但我无法确定。 – wf4

你做

$('.modalWrapper').html($('.partial').html()); 
$('.partial').html('');

然后第二次如果（$（ 'modalWrapper'）。HTML（）！== ''）将永远是真正的
jsfiddle

来源

2013-05-17 16:19:09

如何将按钮文本更改为等待，检查内容更改，然后用jQuery重置按钮文本

回答

相关问题