Question

以下Assert.IsTrue根据#more的可见性更改了#extra的文字：

<style>
#extra{
  display: none;
}
</style>

<a href="#" id="more">More about us</a>
<div id="extra">Some Text</div>

<script>
$('#more').click(function() {        
    if ($('#extra').is(':visible')) {
        $(this).text('Less about us');
    } else {
        $(this).text('More about us');
    }

    $('#extra').slideToggle('fast');   
});
</script>

这很好用。但是，如果我将slideToggle()放在if语句之上（请参阅此jsFiddle），它就不再起作用了：

$('#more').click(function() {
    $('#extra').slideToggle('fast');

    if ($('#extra').is(':visible')) {
        $(this).text('More about us');         
    } else {         
        $(this).text('Less about us');
    }
});

在此示例中，无论#extra是否隐藏，文本都将保留为“更多关于我们”。为什么呢？

Answer 1

代码get一次执行一行，所以当你输入if时，slideToggle没有完成，所以元素是可见的。

您应该将if语句放在slideToggle的完整回调http://api.jquery.com/slidetoggle/

中

$('#more').click(function() {
  var _this = this;
  $('#extra').slideToggle('fast', function() {
    if($(this).is(':visible')) {
      $(_this).text('Less about us');
    }
    else {
      $(_this).text('More about us');
    }
  });
});

jsFiddle

Answer 2

这是因为在检查可见性之前动画尚未完成。一个更清洁的解决方案是：

var visible = false;
$('#more').click(function() {
  visible = !visible;

  if (visible) $('#extra').slideDown();
  else $('#extra').slideUp();

  $(this).text(visible ? 'Less about us' : 'More about us');
});

Fiddle

这样您就不必检查元素的实际可见性。在动画完成后，您可以使用回调来执行代码，但这可能会导致不必要的延迟。

如果div可见，则更改文本

2 个答案: