Comment jQuery peut-il être utilisé pour modifier dynamiquement les sources d'images en un clic ?

Utiliser jQuery pour modifier les sources d'images

Au sein d'une structure Web comme :

<div>

lorsque les utilisateurs cliquent sur un image, vous êtes chargé de mettre à jour sa source vers imgx_off.gif, où x représente l'image numéro.

JQuery est-il capable de gérer cette tâche, ou CSS est-il la méthode préférée ?

Utilisation de la fonction attr() de jQuery

jQuery fournit le Fonction attr(), vous permettant de modifier les valeurs des attributs. Pour modifier la source d'une image avec un identifiant my_image :

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

Changement d'image basé sur un événement

Connectez ce code à un événement de clic :

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

Rotation de l'image

Pour implémenter l'image rotation :

$('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!