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

使用bootstrap3css、font-awesome CSS和最新的jqueryjs文件

当点击按钮时，我使用javascript在另一部分内容之上隐藏/显示一部分内容

HTML

JS

我希望按钮上的文字从

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

到

下面是一个例子

---

根据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>')
    });
});

---

演示：

根据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>')
    });
});

演示：

这是我通常做的事， 在按钮中指定rev属性 HTML

JS

这是我通常做的事， 在按钮中指定rev属性 HTML

JS

---

这是完美的

！非常感谢，@brianlasta为了防止其他人使用此代码，我每次单击按钮时页面都会跳转到顶部。为了修复它，我添加了一行。。。。e、 预防默认值。。。。由于在HTML5中不支持rev属性，我将其更改为data rev或data something，并使用.data'rev'，而不是.attr'rev'，完美！非常感谢，@brianlasta为了防止其他人使用此代码，我每次单击按钮时页面都会跳转到顶部。为了修复它，我添加了一行。。。。e、 预防默认值。。。。由于在HTML5中不支持rev属性，所以我将其更改为data rev或data something，并使用.data'rev'，而不是.attr'rev'，使用，

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

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

$(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>')
    });
});

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