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

问题描述

我正在通过 jQuery 制作一些火箭发射效果.当我点击火箭时，它会与另一个火箭图像交换，然后发射.当我单击重置"链接时，Rocket 必须重置起始位置并且图像必须还原.但是有两个问题.首先，我的火箭形象没有恢复".第二 - 在它恢复到初始位置后，如果我再次单击 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() 行.

解决方案

您在此处删除原始图像:

newImg.animate(css, SPEED, function() {img.remove();newImg.removeClass('morpher');(回调||函数(){})();});

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

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

但是您的 newImg 没有 id 属性，更不用说 rocket 的 id.

要解决这个问题，您需要删除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');(回调||函数(){})();});

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

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

$("#resetlink").click(function(){clearInterval(timerRocket);$("#wrapper").css('top', '250px');$('.throbber, .morpher').remove();//清除新的东西.$("#rocket").show();//带回原件.});

在newImg.load函数中，抓取图片原始大小:

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

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

newImg.animate(css, SPEED, function() {img.css(orig).hide();(回调||函数(){})();});

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

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

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

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

解决方案

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:

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

But your newImg doesn't have an id attribute let alone an id of 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() {})();
});

And then you'll get the shiny black rocket back again: 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:

$("#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.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() {})();
});

New and improved: 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.

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