jquery - 用户单击时将按钮与图像交换

Question

我希望当用户单击按钮然后通过 Ajax 调用页面方法时，我想用动画图像交换按钮。告诉我最好的方法。我知道如何用图像交换按钮。这里有一个样本。

$('the-button').bind('click', function () {
    $(this).replaceWith('<img src="/wherever.jpg"/>');
});

我不知道如何保持按钮位于页面上的图像位置。基本上我想在用户单击它并开始 ajax 调用时在按钮的位置显示动画图像，当 ajax 调用完成时，动画图像将再次被按钮替换。

这里我提供一个演示网址demo.aspnetawesome.com

请告诉我实现我的目标的最佳方法，这将是高度可重用的。谢谢。

score 0 · Accepted Answer

一种方法是有两个元素，按钮和图像。使按钮可见并隐藏动画图像（使用 display: none 使其不占用页面中的任何空间）。然后，当单击按钮时，隐藏按钮并显示图像。如果您使用 display: none 则提供按钮和图像的大小相同并在 DOM 中相邻呈现，它们将使用相同的位置并且不会影响您的布局。

所以非常粗略：

var animation = $('#the-image');
var button = $('#the-button');

button.on('click', function(){
  button.hide();
  animation.show();
});

1 回答 1