jQuery attr（）改变了img src [英] jQuery attr() change img src

问题描述

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

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?

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（）行。

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

推荐答案

您在此删除原始图片：

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

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

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

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

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

But your newImg doesn't have an id attribute let alone an id of rocket.

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

To fix this, you need to remove img and then set the id attribute of newImg to 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/

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

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

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:

$("#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 函数中，抓取图像原始大小：

And in the newImg.load function, grab the images original size:

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() {})();
});

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

插件外的$（'。throbber，.morpher'）并不是最好的事情，但只要记录在案，这不是什么大问题。

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.

这篇关于jQuery attr（）改变了img src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！