jQuery attr() 更改 img 的 src

Question

我正在使用jQuery创建火箭发射效果。当我点击火箭时，它将与另一张火箭图片交换位置，然后向上发射。当我点击“重置”链接时，火箭必须重置起始位置并还原图像。但是有两个问题。首先，“我的火箭图像没有还原回来”。其次，在它恢复到初始位置后，如果我再次点击火箭，它不会发射。你能看到问题并帮我找到解决方法吗？ 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() 行。

- Gereltod

Answer 1

您需要删除这里的原始图片：

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

所有留下来的只有newImg。然后，您可以使用#rocket重设链接引用该图像：

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

但是你的“newImg”没有“id”属性，更不用说“id”为“rocket”的属性了。

要解决这个问题，你需要删除“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/ambiguous/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() {})();
});

新的和改进的: http://jsfiddle.net/ambiguous/W2K9D/1/ 在插件之外泄露$('.throbber, .morpher')并不是最好的事情，但只要有文件记录，这并不是什么大问题。

- mu is too short

---

+1 抢先一步了。我认为 OP 需要隐藏旧图像而不是删除它，然后通过 newImg.remove() 和 img.show() 进行重置。 - mellamokb

@mellamokb @Gerelt：隐藏 #rocket 会更好，因为您不必担心传输 id 或重新绑定任何事件处理程序。 - mu is too short

@Gerelt：我的修改版缺少什么？我知道你会失去点击处理程序，还有其他的吗？而且大小没有被重置。 - mu is too short

@Gerelt：我做了一些更改（隐藏原始内容，删除新添加的东西，恢复原始大小）：http://jsfiddle.net/ambiguous/W2K9D/1/ - mu is too short

@mu：仍然有一个小问题。如果您在它完成变形之前非常快地按重置，它将无法正常工作。试一试就知道我是什么意思了，原始图像会变大，然后完全消失。 - mellamokb

Answer 2

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

   更改为：

   $("#wrapper > img")

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

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

- Khoa Nguyen