Question

我有一个按钮，可以在笼子里的鸟和无鸟笼之间切换背景图像，表示布尔选项，并带有以下图像：

布尔：发布文字=图片：没有鸟的笼子。
布尔：文本未发布=图片：没有鸟的笼子。

如果页面加载并且鸟笼是空的（文本已发布），我可以单击它并切换它应该的方式：鸟回到笼子里。但是如果我加载页面并且文本没有发布，当我点击笼中的鸟时，会发送相应的数据，但图像不会切换（尽管被发布，鸟仍然在笼中）。当我再次单击它时，切换开始工作，但现在与布尔状态不同步。

这是一款Rails应用。这是我的代码：
jQuery的：

$("#text_publish<%= @text.id %>").toggleClass(function() {
  if ($(this).is('.birdCagePublished')) {
    return 'birdCageUnPublished';
  } else {
    return 'birdCagePublished';
  }
});

CSS：

.birdCagePublished {
  display: inline-block;
  background-image: url(emptyCage.png);
}

.birdCageUnPublished {
  display: inline-block;
  text-decoration:none;  
  background-image: url(fullCage.png);
}

HTML：

<div>
<a alt="Begin Freewriting" class="birdCageUnPublished" data-remote="true" href="/text/3400/toggle_published" id="text_publish3400"></a>
</div.

文本控制器切换方法：

  def toggle_published
    @text = Text.find(params[:id])
    @text.toggle!(:published)
  end

登录成功切换：

Started GET "/text/3400/toggle_published" for 127.0.0.1 at 2014-11-01 00:07:29 -0500
Processing by TextController#toggle_published as JS
  Parameters: {"id"=>"3400"}
  [1m[35mText Load (0.4ms)[0m  SELECT "text".* FROM "text" WHERE "text"."id" = $1 LIMIT 1  [["id", "3400"]]
  [1m[36m (0.1ms)[0m  [1mBEGIN[0m
  [1m[35mSQL (0.3ms)[0m  UPDATE "text" SET "published" = $1, "updated_at" = $2 WHERE "text"."id" = 3400  [["published", false], ["updated_at", Sat, 01 Nov 2014 05:07:29 UTC +00:00]]
  [1m[36m (0.8ms)[0m  [1mCOMMIT[0m
  Rendered text/toggle_published.js.erb (0.0ms)
Completed 200 OK in 6ms (Views: 2.9ms | ActiveRecord: 1.5ms)

Started GET "/assets/fullCage.png" for 127.0.0.1 at 2014-11-01 00:07:29 -0500

记录失败切换：

Started GET "/text/3400/toggle_published" for 127.0.0.1 at 2014-11-01 00:09:32 -0500
Processing by TextController#toggle_published as JS
  Parameters: {"id"=>"3400"}
  [1m[36mText Load (0.3ms)[0m  [1mSELECT "text".* FROM "text" WHERE "text"."id" = $1 LIMIT 1[0m  [["id", "3400"]]
  [1m[35m (0.1ms)[0m  BEGIN
  [1m[36mSQL (0.2ms)[0m  [1mUPDATE "text" SET "published" = $1, "updated_at" = $2 WHERE "text"."id" = 3400[0m  [["published", true], ["updated_at", Sat, 01 Nov 2014 05:09:32 UTC +00:00]]
  [1m[35m (0.7ms)[0m  COMMIT
  Rendered text/toggle_published.js.erb (0.1ms)
Completed 200 OK in 6ms (Views: 3.1ms | ActiveRecord: 1.4ms)

请注意，不成功切换的登录不会获得＆＃34; /assets/emptyCage.png"您怎么看？

jQuery .toggleClass在第二次单击时工作，而不是在第一次单击时工作

0 个答案: