Javascript Jquery使用切换进行折叠

我有一个双重折叠视图，点击一个按钮，将使图像“折叠”而文本部分“折叠”打开。此功能是一项很好的工作。但是，当我向按钮添加一个

onclick（）

来更改颜色（通过类）和字体图片时，有一个奇怪的功能。通常情况下，它是有效的，但是通常在重新加载页面时第一次单击只会导致按钮更改，而不会折叠。什么给你

以下是一些可能需要的代码和注释：

Haml按钮和后续折叠部分：

%h2
  Name
  %button.btn.btn-info.pull-right{data:{toggle:"collapse", target:".buy-collapse#{ammo.id}", parent:"accordion"}, onclick:'buyChange($(this))'}
      %i.fa.fa-shopping-cart
        Buy
%hr
// Order Form
.collapse{class:"buy-collapse#{ammo.id}"}
  -# Form is here

= image_tag "ammos/"+ammo.img, :class=>"", :class=>"img-responsive img-centered buy-collapse#{ammo.id} collapse in", :alt=>''

用于按钮更改的内部javascript函数：

:javascript
  function buyChange($this) {
    if ($this.hasClass("btn-info")) {
      $this.removeClass("btn-info");
      $this.addClass("btn-danger");
      $this.html('<i class="fa fa-times"> Cancel</i>');
    } else {
      $this.removeClass("btn-danger");
      $this.addClass("btn-info");
      $this.html('<i class="fa fa-shopping-cart"> Buy</i>');
    }
  }

：javascript
函数buyChange（$this）{
if（$this.hasClass（“btn信息”））{
$this.removeClass（“btn信息”）；
$this.addClass（“btn危险”）；
$this.html（'Cancel'）；
}否则{
$this.removeClass（“btn危险”）；
$this.addClass（“btn信息”）；
$this.html（'Buy'）；
}
}

---

关于我的项目rails-V4.1、bootstrap、font awesome的一些信息你的文档加载了吗？通常，您不希望像这里这样混合使用html和javascript。尝试将类似以下代码的内容添加到

app/assets/javascripts

文件夹中相应的javascript文件中：

var ready;
ready = function() {

  // I'd recommend an id selector here
  $('button.btn.btn-info.pull-right').on('click', function() {
    // Add your code to change button and collapse form and
    // whatever else you want to happen on click here.
  });

};

$(document).ready(ready);
$(document).on('page:load', ready);