chaîne Injecter dans l'attribut src

Question

Je tente d'ajouter une src de plusieurs images en utilisant jQuery comme suit:

<img src="image.jpg"> 

à

<img src="image-thumb.jpg"> 

Pour une raison quelconque, je ne peux pas sembler envelopper la tête autour de cela.

Des idées?

Answer 1

Tout d'abord, ajoutez une classe aux balises img que le script doit affecter (par exemple <img src="image.jpg" class="foo">).

Ensuite, utilisez l'attribut jQuery de .attr() method pour définir le src de toutes les balises img que vous voulez:

$('.foo').attr('src', 'image-thumb.jpg'); 

Si vos images sont nommées différemment et que vous voulez juste ajouter -thumb à chacun à la fois, l'utilisation une fonction de rappel:

$('.foo').attr('src', function(index, attr) { 
    return attr.replace(/\.[^.]*$/, '-thumb$&'); 
}); 

Dans ce deuxième exemple de code, je me sers d'une expression régulière pour rechercher et remplacer la fin de l'URL de l'image.

Answer 2

Si vous connaissez l'ID de l'image que vous pouvez utiliser $("#img").attr("src","second.jpg");

Vous pouvez également accéder à l'attribut src à l'aide $("#img").attr("src");. Le reste fait juste le remplacement de la chaîne.

Answer 3

$('#something img').each(function() { 

    var src = $(this).attr('src').replace(/(\.\w*)$/, '-thumb$1'); 

    $(this).attr({ src: src }); 

}); 

See it.

Le dernier exemple d'Idealmachine dans his answer est une manière plus propre de faire ce que j'ai suggéré ci-dessus (c'est-à-dire si c'est la seule manipulation que vous faites sur l'élément img).

donc nous avons tous deux se souviennent ...

• attr() peut prendre une fonction comme second argument - pour faire ce genre de choses plus faciles.
• $& est la référence arrière pour toute la chaîne correspondante - pas besoin d'envelopper avec des parenthèses comme je l'ai fait.