Question

使用jQuery，我正在努力做一个快速的＆amp;更改控件按钮（#ctrlBtn）的innerHtml文本以使用html（）方法反映div的slideToggle（）状态的脏方法。我似乎无法理解它。它会在第一次点击时更改按钮文字，但那就是它...... 这是代码：

<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");
}

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

Joe Negron~NYC

Answer 1

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

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

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

你可以看到它in action here。

Answer 2

我会试一试：

var ctrlBtn = $("#ctrlBtn");
var statsDetail = $("#StatsDetail");

statsDetail.hide(); //hide it to start

ctrlBtn.click(function(){
  statsDetail.slideToggle();
  ctrlBtn.text( ((ctrlBtn.text() === 'Hide') ? 'View' : 'Hide') );
});

你想要注意的事情：

始终缓存jQuery对象，因为每次需要更改属性时创建新对象都很昂贵。
当您尝试隐藏某些内容时，请使用hide()。你不仅可以立即明白自己在做什么，还可以避免滑动效果带来的动画（或者，如果你做意味着拥有动画，那么使用slideUp()）
你的三元运营商让你很困惑。括号不平衡。
我也会停止将div放在button中 - 它不是有效的HTML。将id改为button，然后使用display: inline-block

jquery动态切换按钮

2 个答案: