Changer le chemin de l'image via jquery

Avec le développement continu des sites Web, la demande d'effets dynamiques devient également de plus en plus élevée. En tant que bibliothèque JavaScript rapide, simple et pratique, jQuery simplifie considérablement le processus de développement des pages frontales. Cet article explique comment utiliser jQuery pour obtenir l'effet de modification du chemin de l'Changer le chemin de lChanger le chemin de limage via jquery via jquery.

1. Analyse des exigences

Lorsque nous avons besoin de plusieurs ensembles de skins ou de thèmes différents, c'est sans aucun doute un problème si nous devons modifier manuellement les chemins de toutes les Changer le chemin de lChanger le chemin de limage via jquery via jquerys à chaque fois que nous changer la peau. Une chose très lourde. Par conséquent, nous avons besoin d’un moyen plus pratique pour modifier le chemin de l’Changer le chemin de lChanger le chemin de limage via jquery via jquery.

2. Conception de la solution

1 Ajoutez un attribut de classe à l'Changer le chemin de lChanger le chemin de limage via jquery via jquery dont le chemin doit être modifié, tel que "change-path".

<img  src="img/1.jpg" class="change-path" / alt="Changer le chemin de l'image via jquery" >

2. Obtenez ces balises img via jQuery et remplacez leurs chemins.

$('.change-path').each(function() {
    var oldSrc = $(this).attr('src'); //获取原图片路径
    var newSrc = 'newPath/' + oldSrc.substring(oldSrc.lastIndexOf('/') + 1); //构造新图片路径，这里假设新路径为“newPath/”
    $(this).attr('src', newSrc); //替换图片路径
});

3. Implémentation du code

Ensuite, nous utiliserons un exemple simple pour montrer comment modifier le chemin de l'Changer le chemin de lChanger le chemin de limage via jquery via jquery via jQuery.

1. Préparation

Avant cela, nous devons préparer quelques photos. Comme indiqué ci-dessous :

2 Implémentez le code

Ajoutez le code suivant dans le fichier HTML :

.

    
    
    


    
Change Image Path

    <img  src="img/1.jpg" class="change-path" / alt="Changer le chemin de l'image via jquery" >
    
    

    <script>
        $('.change-path').each(function() {
            var oldSrc = $(this).attr('src');
            var newSrc = 'newPath/' + oldSrc.substring(oldSrc.lastIndexOf('/') + 1);
            $(this).attr('src', newSrc);
        });
    </script>

Dans ce code, nous présentons d'abord la bibliothèque jQuery. Ensuite, nous avons utilisé le sélecteur $(".change-path") pour obtenir toutes les balises img avec l'attribut de classe "change-path", puis avons utilisé la méthode .each() pour parcourir ces balises. Lors du parcours de chaque balise, nous obtenons la valeur d'attribut src d'origine de chaque balise via la méthode .attr() et l'attribuons à la variable oldSrc. Ensuite, nous modifions oldSrc selon les besoins et obtenons newSrc. Enfin, nous attribuons la valeur modifiée à l'attribut src d'origine via la méthode .attr().

3. Effet d'exécution

Après avoir exécuté le code, nous pouvons constater l'effet suivant :

#🎜 🎜#Comme vous pouvez le voir, les chemins de toutes les Changer le chemin de lChanger le chemin de limage via jquery via jquerys ont été modifiés en "newPath/1.jpg", "newPath/2.jpg" et "newPath/3.jpg", ce qui répond à nos besoins.

4. Résumé

Cet article présente comment modifier le chemin de l'Changer le chemin de lChanger le chemin de limage via jquery via jquery via jQuery. Grâce à cette méthode, nous pouvons facilement modifier toutes les Changer le chemin de lChanger le chemin de limage via jquery via jquerys qui doivent changer de chemin, rendant ainsi notre travail de développement plus efficace et plus simple. Bien entendu, jQuery peut également être utilisé pour implémenter davantage d'autres effets dynamiques, et les lecteurs peuvent les apprendre et les utiliser en fonction de leurs propres besoins.

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!