Discussion :

[Arsene12]

Bonjour,

j'ai un bouton qui affiche un mot si l'on y clique dessus.
Je voudrais ensuite qu'en cliquant sur ce mot on puisse en changer la couleur de fond ou la valeur.

https://jsfiddle.net/qughc5a6/22/

J'utilise mal le <span>, mon code est bancal, je sais tout ça. Je fais de l'ajax Jquery depuis pas longtemps.
Votre réponse m'aidera à progresser, merci d'avance.

Cordialement,

Arsène

[NoSmoking]

Bonjour,
je vois avec intérêt que tu tires enseignement de ce que l'on te dit au travers de tes différentes discussions

Votre réponse m'aidera à progresser, merci d'avance.

...dans ce cas voici un exemple de code, d'autres formes sont possibles, auquel le tien pourrait ressembler

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function () {
    // sur le click de l'élément ayant pour ID "monBouton"
    $('#monBouton').on('click', function () {
        // pas de prochaine action possible
        $(this).attr('disabled', 'disabled');
        // création d'un élément <span>
        $('<span>un mot</span>')
            // affectation d'un événement sur le click
            .on('click', function () {
                // mise en cache objet
                $obj = $(this);
                // récupération du contenu
                $text = $obj.text();
                // affichage, un console.log serait moins bloquant
                alert($text);
                // modification de la couleur de fond
                $obj.css({
                    'background-color': '#FFFF00'
                })
                // modification du texte
                .text($text + ' sur fond jaune');
            })
        // affectation d'un style particuler
        .css({
            'cursor': 'pointer'
        })
        // ajout à l'élément ayant pour ID "maFen"
        .appendTo($('#maFen'));
    });
});

Je t'engage encore une fois à apprendre les bases de javascript et jquery et comme tu as de la chance, DVP possède un « livre » en français

Débuter avec jQuery
La bibliothèque qui simplifie l'interaction.

[EDIT]
Je te conseille : 5-1. Créer un nouvel élément HTML

[danielhagnoul]

@NoSmoking : $(this).attr('disabled', 'disabled'); "disabled" est une propriété booléenne, donc $( this ).prop( 'disabled', true ); est recommandé.

Voir : http://api.jquery.com/prop/

[Arsene12]

Merci pour ces réponses.
Mon véritable problème porte sur le $(this). Je crée une série d'éléments $('#monMot')[0].id= "monMot" +i; et je voudrais qu'en cliquant sur ce bouton s'affiche en alert l'id ou la value par exemple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var myval = $('#maFen').append('<span id = "monMot" class=".generatedButtonWords" onClick="mesWords(this.value);" >'+ "Numero" +' </span>' );

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function mesWords(arg){
alert ($(this).value)
alert ($(this).id)
}
});

[NoSmoking]

@danielhagnoul :
je me suis appuyé sur son code pour écrire l'exemple et il est vrai que sur la forme, utilisation de la librairie jQuery, tu as entièrement raison même si sur le fond disabled est un attribut booléan, au sens des recommendations.

La relation entre le HTML et les objets javascript crées au chargement de la page pouvant amener à des confusions il est effectivement préférable d'écrire $( this ).prop( 'disabled', true ) (en lecture et écriture).

@Arsene12 :

• il te sert à quoi que l'on te fasse des exemples ?
• il te sert à quoi le paramètre passé à la fonction function mesWords(arg) ?
• t'es tu posé la question de ce que représente $(this) dans ta fonction ?

[Arsene12]

Méthode Append().

Dans mon code, j'utilise ajax pour extraire des mots d'une base de données et les aligner dans une Div.
Chaque élément (mot) porte un ID : id=Mot1, id=Mot2, id=Mot3,..., id=Mot100.
Quand je crée les éléments avec append() je passe à la fonction la value : mesWords(this.value) ou l'id : mesWords(this.id).

Function()

Ensuite dans la fonction je suis obligé de passer en revue tous les éléments pour sélectionner celui que j'ai cliqué.
Pour le repérer j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for (var i = 0; i <= NombreDelements; i++) {
$("#Mot"+i).val() === arg
}

//(je pourrai utiliser aussi l'id à la place de la value).

Voilà la réponse à la question :

il te sert à quoi le paramètre passé à la fonction function mesWords(arg) ?

// L'explication est là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

($("#Mot"+i).val() === arg)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
for (var i = 0; i <= NombreDelements; i++) {
        if ($("#Mot"+i).val() === arg) {
		       $("#Mot"+i).text("Nouveau Mot");  / Pour remplacer le mot par un autre par exemple
		       $("#Mot"+i).css('background-color','#C0C0C0'); // Pour changer la couleur de fond du mot
		}
	     };

[Arsene12]

Mon problème est en partie résolue mais j'aimerai rajouter une condition. J'aimerai que l'action ne s'exécute que si la couleur de fond de l'élément est grise par exemple. J'arrive pas à trouver la formule du genre :
($("#Mot"+i).attr('background-color','#C0C0C0')=true)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($("#Mot"+i).val() === arg && background-color===gris)

[NoSmoking]

Ensuite dans la fonction je suis obligé de passer en revue tous les éléments pour sélectionner celui que j'ai cliqué.

arrête de manipuler des choses dont tu ne maitrises pas grand chose, prend le temps de lire/comprendre ce que l'on t'écrit et surtout la documentation jQuery.

J'aimerai que l'action ne s'exécute que si la couleur de fond de l'élément est grise...

dans ce cas utilise la possibilité qui t'est offerte d'attacher un événement qui ne sera pris en compte qu'une seule fois, j'ai cité .one().


Concernant l'ensemble cela pourrait se résumer à
le CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.laclasse {
  background-color:#c0c0c0;
}

l'HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input id="monBouton" type="button" value="Changer valeur" />
<ul id="liste"></ul>

et le JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/// des données pour simuler le retour Ajax
var data = [
  'Un',
  'Deux',
  'Trois',
  'Quatre',
  'Cinq'
];
 
$(document) .ready(function () {
  // sur le click de l'élément ayant pour ID "monBouton"
  $('#monBouton') .on('click', function () {
    // pas de prochaine action possible
    $(this) .prop('disabled', true);
    // on boucle sur les données
    $.each(data, function ( key, value) {
      // création d'un élément <span>
      $('<li>' + value + '</li>')
      // affectation d'un événement unique sur le click
      .one('click', function () {
        // mise en cache objet
        $obj = $(this);
        // récupération du contenu
        $text = $obj.text();
        // affichage, un console.log serait moins bloquant
        console.log($text);
        $obj
          // ajout de la classe CSS
          .addClass('laclasse')
          // modification du texte
          .text($text + ' sur fond gris');
      })
      // affectation d'un style particuler
      .css({
        'cursor': 'pointer'
      })
      // ajout à l'élément ayant pour ID "maFen"
      .appendTo($('#liste'));
    });
  });
});

peu de chose de changé depuis le dernier exemple, il suffit de boucler sur les données en retour et d'ajouter plutôt une classe aux éléments cliqués.

Je te laisse méditer (ou non) et si tu as des questions concernant le code, la démarche, n'hésite pas mais fait un effort

[Toufik83]

bonsoir,
à ta place, je suivrai les conseils de NoSmoking, il faut comprendre la base de jQuery avant de faire quoi que se soit, sinon tu feras des bêtises comme nous l'avons fait auparavant

pour obtenir l'attribut background-color d'un élément X on fait : X.css("background-color") ou X.css("backgroundColor") y'en a plusieurs moyens...
de toute façon le résultat sera en RGB sous forme de rgb(x,x,x),si tu veux que le résultat soit sous forme "#XXXXXX", il te faudra une fonction qui converti le rgb en hexadécimal.
voilà un petit exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.bleu{background-color:blue;color:white}
.gris{background-color:#D5D1D1}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<ul class='parent'>
<li class='bleu'>A</li>
<li class='gris'>B</li>
<li class='bleu'>C</li>
<li class='gris'>D</li>
<li class='bleu'>E</li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(function(){
	var obj=$(".parent"),couleur;
  obj.children().click(function(){
    couleur=rgb2hex($(this).css("background-color"));
    if(couleur=="#d5d1d1")
    {
    	alert("la couleur est :"+couleur);
    }
  });
 
});
function rgb2hex(orig){
 var rgb = orig.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig;
}

[Arsene12]

Merci beaucoup,
je vais suivre tous vos bon conseils à la lettre mais en attendant pourriez-vous m'expliquer pourquoi mon alert :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert ("Couleur Grise");

ne s'affiche pas :

https://jsfiddle.net/qughc5a6/29/

On clique d'abord sur le bouton Afficher mot puis sur le bouton Afficher nom de la couleur

[Toufik83]

pourriez-vous m'expliquer pourquoi mon alert ne s'affiche pas

ton alerte ne s'affiche pas par-ce-que le block if(couleur=="rgb(192,192,192)") n'est jamais vrai, regarde un peu en haut, je t'avais dis de convertir le rgb en hexadécimal puis tu vérifie la couleur sous forme de "#XXXXXX" et non pas sous forme rgb.

[Arsene12]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

je t'avais dis de convertir le rgb en hexadécimal puis tu vérifie la couleur sous forme de "#XXXXXX" et non pas sous forme rgb

C'ext exactement ce que j'ai fait, et c'est super ça marche. Mais il faut mettre les lettres en minuscules if(couleur=="#c0c0c0"):

https://jsfiddle.net/qughc5a6/31/

sinon avec if(couleur=="#C0C0C0") ça marche pas :

https://jsfiddle.net/qughc5a6/30/

[Toufik83]

oui, en majuscule ça ne fonctionne pas, par-ce-que la fonction .toString(16) renvois le résultat en minuscule.
si tu veux que se soit en majuscule, tu n'a qu'a ajouter .toUpperCase() juste après .slice(-2) de chaque ligne (même si je ne vois pas l'intérêt de vérifier en majuscule).
n'oublie pas de passer le sujet en résolu.
Cordialement,

[Arsene12]

Merci beaucoup, j'ai résolu le problème pour l'application que je crée.

Par contre sur

https://jsfiddle.net/qughc5a6/32/

je voudrai éliminer le bouton2 et cliquer directement sur l'élément crée par le bouton1 pour en modifier la couleur et le texte.

https://jsfiddle.net/qughc5a6/35/

ça marche pas

Si j'y parviens, je pourrai cliquer sur Résolu, car c'est ce que je voulais faire au début de la discussion.

[NoSmoking]

Si tu as pris la peine de cliquer sur le bouton peut être prendras tu le temps de lire la réponse que je t'ai faite dans ce post

Conseil, que tu ne suivras surement pas, ne te disperse pas

[Arsene12]

Bonjour, merci beaucoup pour vos réponses.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// sur le click de l'élément ayant pour ID "monBouton"
  $('#monBouton') .on('click', function ()

Malheureusement, j'ai 350 éléments avec 350 Id, je ne peux donc pas taper 350 fois le code.

[NoSmoking]

Tu n'as visiblement pas compris le « potentiel » du script

il suffit de boucler sur les données en retour et d'ajouter plutôt une classe aux éléments cliqués.

Dans l'exemple le bouton n'est là que pour simuler ton appel Ajax, c'est le $each qui boucle sur tes données, que tu ais 5 ou 350 éléments à traiter le code sera le même soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// on boucle sur les données contenu dans data
$.each(data, function ( key, value) {
  // création d'un élément <span>
  $('<li>' + value + '</li>')
  // affectation d'un événement unique sur le click
  .one('click', function () {
    // mise en cache objet
    $obj = $(this);
    // récupération du contenu
    $text = $obj.text();
    // affichage, un console.log serait moins bloquant
    console.log($text);
    $obj
      // ajout de la classe CSS
      .addClass('laclasse')
      // modification du texte
      .text($text + ' sur fond gris');
  })
  // affectation d'un style particuler
  .css({
    'cursor': 'pointer'
  })
  // ajout à l'élément ayant pour ID "maFen"
  .appendTo($('#liste'));
});

tu pourrais également regarder du coté de la délégation d'événement mais chaque chose en son temps !

[Toufik83]

bonjour,
tout d'abord il ne faut surtout pas créer des éléments html avec le même id "monMot", puis si tu veux que tout les span écoutent le click, tu as 2 possibilités, soit faire un $.each sur les span (comme NoSmoking t'a mentionné en haut) soit, tu les ajoutes une classe.
2éme solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
$(document).ready(function() { 
var compteur=0,Id;
$('#monBouton').click(function() {
	$('#maFen').append('<span id = "monMot_'+compteur+'" class="clickable" >'+ "Mot" + '</span>' );
	$("#monMot_"+compteur).css({"background-color": "#C0C0C0"});
	compteur++; // on incrément le compteur 
});
 
$("body").on("click",".clickable",function(){
  Id=$(this).attr("id");
	mesWords($(this).css("background-color"));
});
 
function mesWords(arg) {
			couleur=rgb2hex(arg);
      alert (couleur); 
			if(couleur=="#c0c0c0") { 
         $("#"+Id).text("Word").css('background-color','Crimson');  
     	}
 
}
 
function rgb2hex(orig){
 var rgb = orig.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig;
}
 
});

[Arsene12]

Je suis en train de réfléchir sur la façon d'appliquer vos méthodes.


En ce qui concerne l'incrémentation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.append('<span id = "monMot'+compteur+'"...

J'avais effectivement songé qu'il valait mieux procéder ainsi plutôt que de rajouter une ligne supplémentaire comme je faisais (ce qui revenait au même) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.append('<span id = "monMot"...)
$('#monMot')[0].id= "monMot" +compteur;

là j'ai besoin d'explication :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  Id=$(this).attr("id");
  mesWords($(this).css("background-color"));

[Toufik83]

les éléments qui appartient a la classe .clickable, sont ajoutés après le chargement de la DOM (ils ne sont ajoutés qu'après le Click sur le bouton), et en jQuery on sélectionne leur parent statique puis on.("click","class",function(){}), j'ai pris le "body" comme parent statique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$("body").on("click",".clickable",function(){
  Id=$(this).attr("id");
	mesWords($(this).css("background-color"));
});

si tu veux pas t’embêter avec le Id, tu peux le mettre comme paramètre dans la fonction mesWords(args,Id) puis le tour est joué.
tu change la fonction ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function mesWords(arg,Id) {
      couleur=rgb2hex(arg);
      alert (couleur); 
      if(couleur=="#c0c0c0") { 
         $("#"+Id).text("Word").css('background-color','Crimson');  
     	}
}

et quand tu l'appelle dans le click tu l'appelle ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("body").on("click",".clickable",function(){
	mesWords($(this).css("background-color"),$(this).attr("id"));
});