jquery动态切换按钮

Question

使用 jQuery，我试图采用一种快速而肮脏的方法来更改控制按钮 (#ctrlBtn) 的 insideHtml 文本，以使用 html() 方法反射(reflect) div 的 slipToggle() 的状态。我似乎无法理解它。它会在第一次单击时更改按钮文本，但仅此而已......这是代码:

<script type="text/javascript">
      $(document).ready(function(){
        $("#StatsDetail").slideToggle(); //hide it to start
        $("button").click(function(){
          $("#StatsDetail").slideToggle(); //show/hide 
          // the next line is not working even w/standard if/else syntax...
          ($("#ctrlBtn").html!="Hide") ? $("#ctrlBtn").html("Hide") : "#ctrlBtn").html("View"); 
        }); //end-onClick
      }); //end-onLoad
</script>
<span class="right"><button><div id="ctrlBtn">View/Hide Details</div></button></span>
<div id="StatsDetail"> Lorem ipsum yadda yadda blah </div>

我什至尝试过

if ($("#statsDetail").is(":visible")) {
    $("#ctrlBtn").html("Hide"); 
 } else { 
    $("#ctrlBtn").html("View");
} 

我知道我一定错过了一些非常愚蠢的东西。任何帮助将不胜感激。

乔·内格伦 ~ 纽约

Answer 1

一旦幻灯片动画完成，这将使用回调函数执行您想要的操作:

$("button").click(function() {
    $("#StatsDetail").slideToggle(function() {
        $('#ctrlBtn').text($(this).is(':visible')? 'hide' : 'show');
    });
});

它的工作方式是在#StatsDetail上完成slideToggle后执行定义的回调函数。然后，它检查 #StatsDetail 是否可见并设置按钮 text()相应地。

可以看到in action here .