Question

我有一个双折叠视图，按下按钮，会使图像“崩溃”，文本部分“崩溃”打开。这个功能是有效的。但是，当我向按钮添加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>');
    }
  }

关于我的项目的一些信息，rails -v 4.1，bootstrap，font-awesome

Answer 1

您的文件是否已加载？一般来说，你不想像你在这里混合你的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);

Jquery与Toggle崩溃

1 个答案: