单击切换另一个元素的文本和 css 类上的 Jquery 按钮

Question

我正在创建一个关于点击事件的 jquery，该事件切换 div#foo 的 css 类(将其附加在现有类之后)，但还需要在显示/隐藏之间切换点击时的按钮文本。

<script>
$(document).ready(function(){
  $("button.toggler").click(function(){
    $("#foo").toggleClass("maximize");
    $("button.CsToggle").text(!text == "Expand" ? "Hide" : "Expand");
  });
});
</script>

<div id="foo" class="preExistingClass">
  <div>
    <button class="toggler">Expand</button>
  </div>
</div>

我的类切换工作正常，但文本切换工作不正常。我哪里出错了？

Answer 1

使用html()函数设置按钮的innerHtml。选择器也应该是 $("button.toggler")。此外，您还需要有一个可用的变量文本，我假设您的业务逻辑将决定它的设置方式..

$(document).ready(function(){
  $("button.toggler").click(function(){
    $("#foo").toggleClass("maximize");
    $(this).html($(this).html() == "Expand" ? "Hide" : "Expand");
  });
});

工作示例:http://jsfiddle.net/z5QVM/