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

时间:2013-02-01 18:04:53

标签: jquery

我在click事件上创建了一个jquery,它切换了一个div #foo的css类(在现有类之后附加它),但是还需要在show / hide之间切换按钮的文本。

<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>

我让班级切换工作正常但不是文本切换。我哪里出错了?

2 个答案:

答案 0 :(得分:4)

使用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/

答案 1 :(得分:0)

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