web-dev-qa-db-fra.com

jQuery attr () change img src

Je fais un effet de lancement de Rocket par jQuery. Lorsque je clique sur Rocket, il échange avec une autre image de fusée, puis se lance. Lorsque je clique sur le lien "Réinitialiser", Rocket doit réinitialiser l'emplacement de départ et l'image doit revenir en arrière. Mais il y a deux problèmes. Premièrement, "mon image de fusée ne revient pas en arrière". Deuxièmement - après son retour à son emplacement initial, si je clique à nouveau sur Rocket, il ne démarre pas. Pouvez-vous voir et me trouver des 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');
});

Vous pouvez voir la ligne $ ("rocket"). Attr ().

jqueryimagesrcattr
13
Gereltod

Vous supprimez l'image d'origine ici:

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

Et tout ce qui reste est newImg. Ensuite, vous réinitialisez les références de lien à l'image à l'aide de #rocket:

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

Mais votre newImg n'a pas d'attribut id et encore moins un id de rocket.

Pour résoudre ce problème, vous devez supprimer img, puis définir l'attribut id de newImg sur rocket:

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

Et puis vous récupérerez la fusée noire brillante: http://jsfiddle.net/ambiguous/W2K9D/

[~ # ~] mise à jour [~ # ~] : Une meilleure approche (comme indiqué par mellamokb) serait de masquer l'image d'origine puis de la montrer à nouveau lorsque vous appuyez sur le bouton de réinitialisation. Tout d'abord, changez l'action de réinitialisation en quelque chose comme ceci:

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

Et dans la fonction newImg.load, Récupérez la taille originale des images:

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

Et enfin, le rappel pour terminer l'animation de morphing devient ceci:

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

Nouveau et amélioré: http://jsfiddle.net/ambiguous/W2K9D/1/

La fuite de $('.throbber, .morpher') en dehors du plugin n'est jamais la meilleure chose, mais ce n'est pas grave tant qu'elle est documentée.

9
mu is too short

  1. La fonction imageMorph créera un nouvel élément img donc l'id est supprimé. Changé en

    $ ("# wrapper> img")

  2. Vous devriez utiliser la fonction live () pour l'événement click si vous voulez à nouveau lancer une fusée.

Démo mise à jour: http://jsfiddle.net/ynhat/QQRsW/4/

3
YNhat