单击时更改按钮文本（更多/更少）答案

【问题标题】：Change button text when clicked (more/less)单击时更改按钮文本（更多/更少）
【发布时间】：2014-09-02 12:32:16
【问题描述】：

使用 bootstrap 3 CSS、font awesome CSS 和最新的 jQuery JS 文件。

当单击按钮时，我正在使用 javascript 在另一个内容 div 的顶部隐藏/显示一个内容 div。

HTML

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

</div></div></div>

CSS

.HScontainer {
  overflow:hidden;
}

.HSouter {
  position:relative;

  width: 300px;
  height: 200px;
  background: #FBCF3C;
  border: 1px solid black;
  overflow:hidden;
}
.HSbox {
  position:absolute;
  bottom:0;
  left:0;
  width: 300px;
  height: 200px;
  margin-bottom: -200px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all: 0.8s ease;
  transitions: all 0.8s ease;
  background: #19A4DA;
}

.HSbox p {
  margin: 0;
  padding: 5px 0 5px 0;
}

.HSshow {
    margin: 0;
}

.HSshowit { width:300px; }

$(function(){
$('.HSshowit').click(function(e) {
    $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');
});
});

我想改变按钮上的文字

Show More <i class="fa fa-caret-square-o-up"></i>

到

Show Less <i class="fa fa-caret-square-o-down"></i>

这是一个例子……

http://codepen.io/john84/pen/fIupa

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是我通常做的，在按钮
HTML

中赋予 rev 属性

<a href="#" rev="more" class="HSshowit btn btn-primary" role="button">
Show More <i class="fa fa-caret-square-o-up"></i>
</a>

$(function(){
$('.HSshowit').click(function(e) {
    $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');

var condition = $(this).attr("rev");
  if(condition == "more"){
    $(this).html("Show Less <i class='fa fa-caret-square-o-down'>");
    $(this).attr("rev","less");
  }
  else{
    $(this).html("Show More <i class='fa fa-caret-square-o-up'>");
    $(this).attr("rev","more");
  }
e.preventDefault(); //prevent default click action from happening
});
});

这里是result

【讨论】：

完美！非常感谢你，@brianlasta
以防万一其他人使用此代码，每次单击按钮时页面都会跳到顶部。为了解决这个问题，我添加了这一行.... e.preventDefault(); ....到 javascript 代码。
由于 HTML5 (w3schools.com/tags/att_a_rev.asp) 不支持 rev 属性，我将其更改为 data-rev （或 data-something）并使用 .data('rev','')而不是 .attr('rev','')

【解决方案2】：

根据HSbox元素的状态设置文本，比如

$(function () {
    $('.HSshowit').click(function (e) {
        var $box = $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');
        $(this).html($box.hasClass('HSshow') ? 'Show Less <i class="fa fa-caret-square-o-down"></i>' : 'Show More <i class="fa fa-caret-square-o-up"></i>')
    });
});

演示：Fiddle

【讨论】：