11521 sujets

JavaScript, DOM et API Web HTML5

Ajouter une class en javascript

Pages :
Bonjour.

J'aimerai créer un bouton qui lorsque l'on clic dessus ajoute une class a tous les liens présent dans la div bloc pour passer toute les image en noir et blanc.

Idéalement, j'aimerai que lorsque je clic sur le bouton, il ajoute une class a mes liens et si je reclic dessus il enleve la class

Exemple

<input type='button' value='Noir et blanc'>

<div id='bloc'>
<a href='image1' ><img src='image1' alt=''></a>
<a href='image2' ><img src='image2' alt=''></a>
<a href='image3' ><img src='image3' alt=''></a>
</div>

Merci pour votre aide Smiley smile
Bon en faite c'est bien mais du coup quand je clique sur le lien de l'image je ne la vois pas en noir et blanc Smiley ohwell
pourtant le code SuperMerguez t'a donner fonctionne, tu as toutes les clés en mains là...

Met ton code sur codepen, peut être que l'on pourra voir où se situe l'erreur ?
oui il fonctionne parfaitement mais uniquement sur la balise img. lorsque je clique sur le lien pour l'ouvrir elle apparait en couleur du coup
ton lien il ouvre une nouvelle page ? il "refresh" la page ? il ouvre un nouvel onglet ? met ton code sur codepen si tu veux plus d'aide Smiley smile
Modifié par JENCAL (21 Sep 2016 - 15:09)
Oui il ouvre une nouvelle page.

J'avais prévu les image en couleur et en noir et blanc et je m'était dis qu'avec un bouton je ferai changer le lien de l'image.

Mon code est deja mis sur mon premier post, du moins c'est cette esprit la que je recherche car sur mon code il y a aussi du PHP pour afficher l'ensemble des images d'un dossier
Oui tu peux changer le lien bien sur mais dans ce cas c'est pas le code de supermerguez dont tu as besoin.

EDIT:

Enfaite si, tu as besoin du code de supermerguez, mais tu dois l'adapter, tu as juste à changer le cible du .toggleclass() actuellement l'event cible les images, suffit de mettre t'es liens (leur classes de préférences)
Modifié par JENCAL (21 Sep 2016 - 15:21)
Oui c'est pour ca que j'aimerai une sorte de fonction qui en cliquant sur un bouton passe de :

<a href='image.jpg'><img src='image.jpg' alt=''></a>

à

<a href='nb_image.jpg'><img src='nb_image.jpg' alt=''></a>

en gros a chaque fois que je cliquerai sur le bouton sa changerai tout les liens en ajoutant le 'nb_' devant l'image et enleverai le 'nb_' si je reclic
Modifié par spacy59200 (21 Sep 2016 - 15:21)
Re,

pour faire ce que tu souhaites tu peux utiliser la propriété attr() de jQuery qui te permettra de changer de fichier source comme ceci

$(document).ready(function(){
	var path = '/chemin/vers/mon/image/';
	$('button').click(function(){
		$('img').attr('src', (path)+'_nb.jpg');
	})
})


dans l'esprit ça doit être ça je pense non ?
Modifié par SuperMerguez (21 Sep 2016 - 15:38)
oui l'idée est la Smiley smile

dans le script :

serai tu comment recuperer l'ancienne URL ?
exemple (images/img1.jpg)

et la transformer en images/nb_img1.jpg ?

Ou meme dans le pire des cas faire comme un substr en php et ajouter a la fin _nb.jpg
car php me genere une liste d'image avec toute les url

j'ai donc besoin d'un script qui recupere automatiquement toutes les url pour me les transformer

pour les balise a et img
Voici mon code php



<?php 
$images = scandir('images/book');

foreach ($images as $image) {
     if (substr($image,-4) == '.jpg') {
         ?>
               <figure class="gallery-item">
                    <div class="gallery-icon">
                            <a href="images/book/<?php echo $image;?>">
                                <img src="images/book/<?php echo $image;?>" class="attachment-thumbnail" alt="">
                            </a>
                        </div>
                    </figure>
                    <?php
                }
            }


            ?>

Modifié par spacy59200 (21 Sep 2016 - 15:55)
spacy59200 a écrit :
oui l'idée est la Smiley smile

dans le script :

serai tu comment recuperer l'ancienne URL ?
exemple (images/img1.jpg)

et la transformer en images/nb_img1.jpg ?

Ou meme dans le pire des cas faire comme un substr en php et ajouter a la fin _nb.jpg


tu pourrais faire un truc dans ce genre : 

$(document).ready(function(){
	var path = '/chemin/vers/mon/image/';
	$('button').click(function(){
		$('img').toggleClass('nb');
		if($('img').hasClass('nb')){
			$('img').attr('src', (path)+'.jpg');
		}
		else{
			$('img').attr('src', (path)+'_nb.jpg');
		}
	})
})
EDIT ma réponse précédente était fausse donc j'ai viré les trucs inutiles

$(document).ready(function(){
	$('button').click(function(){
		$('img').toggleClass('nb');
		if($('img').hasClass('nb')){
$('img').attr('src', function(index, attr) {
                             return attr.replace(/\.[^.]*$/, '$&');
		}
		else{
                          $('img').attr('src', function(index, attr) {
                             return attr.replace(/\.[^.]*$/, '-nb$&');
});
		}
	})
})


essaie avec un truc dans ce genre
Modifié par SuperMerguez (21 Sep 2016 - 16:29)
Pages :
Sujet clos
Aller à