jQuery attr() 更改 img src

Question

我正在用 jQuery 制作一些火箭发射效果。当我单击“火箭”时，它将与另一个火箭图像交换，然后发射。当我单击“重置”链接时，Rocket 必须重置起始位置，并且图像必须恢复原状。但有两个问题。首先，“我的火箭图像不会恢复”。其次 - 在它恢复到初始位置后，如果我再次单击火箭，它不会启动。你能看到并找到我的解决方案吗？

http://jsfiddle.net/thisizmonster/QQRsW/

$("#resetlink").click(function(){
    clearInterval(timerRocket);
    $("#wrapper").css('top', '250px');
    $("#rocket").attr('src', 'http://www.kidostore.com/images/uploads/P-SAM-rocket-blk.jpg');
});

可以看到 $("rocket") .attr() 行。

Answer 1

您可以在此处删除原始图像：

newImg.animate(css, SPEED, function() {
    img.remove();
    newImg.removeClass('morpher');
    (callback || function() {})();
});

剩下的就是 newImg。然后，您使用 #rocket 重置链接引用图像：

$("#rocket").attr('src', ...

但是您的 newImg 没有 id 属性，更不用说 id< 火箭的/code>。

要解决此问题，您需要删除 img，然后将 newImg 的 id 属性设置为 rocket：

newImg.animate(css, SPEED, function() {
    var old_id = img.attr('id');
    img.remove();
    newImg.attr('id', old_id);
    newImg.removeClass('morpher');
    (callback || function() {})();
});

然后你会再次得到闪亮的黑色火箭：http://jsfiddle.net/ambigously/W2K9D/

更新：更好的方法（如 Mellamokb 所指出的）是隐藏原始图像，然后在按下重置按钮时再次显示它。首先，将重置操作更改为如下所示：

$("#resetlink").click(function(){
    clearInterval(timerRocket);
    $("#wrapper").css('top', '250px');
    $('.throbber, .morpher').remove(); // Clear out the new stuff.
    $("#rocket").show();               // Bring the original back.
});

在 newImg.load 函数中，抓取图像原始大小：

var orig = {
    width: img.width(),
    height: img.height()
};

最后，完成变形动画的回调变为：

newImg.animate(css, SPEED, function() {
    img.css(orig).hide();
    (callback || function() {})();
});

新增和改进： < a href="http://jsfiddle.net/ambigously/W2K9D/1/" rel="nofollow">http://jsfiddle.net/ambigously/W2K9D/1/

$ 的泄露插件外部的 ('.throbber, .morpher') 并不是最好的事情，但只要有记录就没什么大不了的。

Answer 2

1. 函数imageMorph将创建一个新的img元素，因此id被删除。
   更改为

   $("#wrapper > img")

2. 如果你想再次发射火箭，你应该使用 live() 函数来处理点击事件。

更新的演示：http://jsfiddle.net/ynhat/QQRsW/4/