2

我有以下html（小提琴链接）

 <div class="thumbnail_follow" id="follow_btn-2">
   <a  class="btn btn-primary" data-method="post" data-remote="true" rel="nofollow">Follow</a>
 </div>

单击该按钮后，我希望该按钮将其自身替换为带有 h​​tml 的取消关注按钮

  <div class="thumbnail_follow" id="follow_btn-2">
<a href="/users/2/unfollow" class="btn btn-danger" data-method="post" data-remote="true" rel="nofollow">Unfollow</a>
</div>

所以基本上，改变按钮和它指向的链接

我像这样使用 jQuery html()

 $("#follow_btn-2").html('<a class=\"btn btn-danger\" data-method=\"post\" data-remote=\"true\" rel=\"nofollow\">Unfollow<\/a>');

请注意，这是通过代码中的 rails ujs 生成的

$("div[id='follow_btn-<%= @user.id %>']").html('<%=j link_to "Unfollow", unfollow_user_path(@user), :remote => true, :method => :post , :class=>"btn btn-danger"%>');

从jsfiddle可以看出，问题在于，一旦按钮被红色按钮替换，它就会跳开，就好像它的样式搞砸了一样。

我不明白是什么导致了跳转以及如何修复它。它是 css 问题还是 jQuery 使用不当？

这又是小提琴

4

2 回答 2

3

您需要增加容器的宽度以正确适合您的按钮。

width: 200px !important;

你的红色按钮比你的蓝色按钮有更多的宽度

小提琴

于 2013-04-17T10:12:40.190 回答
1

这是因为 Follow 比 Unfollow 短，而且您的容器（thumbnail_car）太小。

于 2013-04-17T10:15:34.453 回答