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)