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

【问题标题】：Jquery button on click toggle text and css class of another element单击切换文本和另一个元素的 css 类的 Jquery 按钮
【发布时间】：2013-02-01 18:04:52
【问题描述】：

我正在创建一个点击事件的 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>

我的类切换正常工作，但文本切换没有。我哪里做错了？

【问题讨论】：

标签： jquery

【解决方案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/

【讨论】：

@jessback 很高兴我能帮上忙。

【解决方案2】：

$("button.CsToggle").toggle(function(){
 if ( $(this).text == "Expand"){ 
     // code
     }
  else {
     //code
   }
});

【讨论】：