jQuery attr() 改变 img src

jQuery attr() change img src

提问by Gereltod

I'm making some Rocket launching effect by jQuery. When I click on Rocket, it'll swap with another rocket image, and then launch up. When I click "Reset" link, Rocket must reset starting location and image must revert back. But there are two problems. First, "my rocket image is not reverting back". Second - after it's reverted to initial location, if I click on Rocket again, it's not launching. Can you see and find me solutions?

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

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

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');
});

You can see $("rocket").attr() row.

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

采纳答案by mu is too short

You remove the original image here:

您在此处删除原始图像：

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

And all that's left behind is newImg. Then you reset link references the image using #rocket:

剩下的就是newImg. 然后您使用#rocket以下方法重置链接引用图像：

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

But your newImgdoesn't have an idattribute let alone an idof rocket.

但是您newImg没有id属性，更不用说idof 了rocket。

To fix this, you need to remove imgand then set the idattribute of newImgto rocket:

要解决此问题，您需要删除img并设置to的id属性：newImgrocket

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

And then you'll get the shiny black rocket back again: http://jsfiddle.net/ambiguous/W2K9D/

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

UPDATE: A better approach (as noted by mellamokb) would be to hide the original image and then show it again when you hit the reset button. First, change the reset action to something like this:

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

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

And in the newImg.loadfunction, grab the images original size:

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

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

And finally, the callback for finishing the morphing animation becomes this:

最后，完成变形动画的回调变成了这样：

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

New and improved: http://jsfiddle.net/ambiguous/W2K9D/1/

新的和改进的：http: //jsfiddle.net/ambiguous/W2K9D/1/

The leaking of $('.throbber, .morpher')outside the plugin isn't the best thing ever but it isn't a big deal as long as it is documented.

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

回答by YNhat

1. Function imageMorphwill create a new img element therefore the id is removed. Changed to

   $("#wrapper > img")

2. You should use live() function for click event if you want you rocket lanch again.

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

   $("#wrapper > img")

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

Updated demo: http://jsfiddle.net/ynhat/QQRsW/4/

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