Comment puis-je modifier dynamiquement les sources d'images avec jQuery on Click ?

Modification des sources d'images avec jQuery

Votre objectif est de modifier dynamiquement les sources d'images dans la structure DOM suivante :

<div>

En cliquant sur chaque image, vous souhaitez modifier sa source en "imgx_off.gif", où "x" correspond soit à "1" ou "2."

Solution : tirer parti de la fonction attr() de jQuery

Oui, il est possible d'accomplir cela sans CSS. La méthode attr() de jQuery vous permet de modifier les attributs des éléments DOM, y compris les URL des sources d'images.

Par exemple, si votre balise d'image possède un attribut id de "my_image", le code suivant fera l'affaire :

<img>

$('#my_image').attr("src", "second.jpg");

Pour attacher cette action à un événement de clic :

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Image Rotation

Si vous souhaitez faire pivoter les images, utilisez ce code :

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!