Bonjour,

je vais essayé d'etre le plus concis possible, j'aimerai changer le parametre d'une fonction :

function afficheCouteau(event){
couteau.lame.piece.chemin;
couteau.plaquette.piece.chemin;
couteau.matiere.piece.chemin;
couteau.vis.piece.chemin;
}

via des cliques sur des titres mais le tout venant de class créer auparavant comme ceci :

class piece {
constructor(nom, libelle, chemin) {
this.nom = nom;
this.libelle = libelle;
this.chemin = chemin;
}
}

let js_lamebrillante = new piece('KB','Squelette finition lame brillante', "/img/produits/fabriquer/KB.png");
let js_plaquettecentrale = new piece('PC','Plaquette Centrale', "/img/produits/fabriquer/PC.png");
let js_matiereboisclairPC = new piece('B01','Bois clair ', "/img/produits/fabriquer/B01.png");

class couteau {
constructor(designation, lame, manche, matiere, prix, vis) {
this.designation = designation;
this.lame = lame;
this.manche = manche;
this.matiere = matiere;
this.prix = prix;
this.vis = vis;
}
}

let KBPCB01 = new couteau("Couteau finition brillante plaquette centrale bois clair", js_lamebrillante, js_plaquettecentrale, js_matiereboisclairPC, "", js_visclair);

et j'aimerai que via 3 cliques (sur le type de lame, de manche et de matiere) cela m'affiche les images des bonnes parties du couteau et qu'il retrouve la variable que j'utilise, dans ce cas precis :

let KBPCB01 = new couteau("Couteau finition brillante plaquette centrale bois clair", js_lamebrillante, js_plaquettecentrale, js_matiereboisclairPC, "", js_visclair);

voici un exemple de click event sur une balise h4 que j'ai créé mais cela ne fonctionne pas :

lameBrillanteTitle.addEventListener('click', () =>{
afficheCouteau.lame.piece.chemin = js_lamebrillante.chemin;
});

sachant que via ces 3 cliques il n'y a qu'un produit possible, je sais pas si j'arrive à m'exprimer correctement car je debute le JS et je suis en train de développer un site pour ma société de personnalisation de couteau et un collegue qui travaille à l'IT aimerai bien récuperer la variable associé au couteau (qui est la référence produit).

via une variable de ce style : let refProduit = afficheCouteau.couteau.lame.piece.chemin.nom + afficheCouteau.couteau.manche.piece.chemin.nom + afficheCouteau.couteau.matiere.piece.chemin.nom;

mais bon pour etre honnette j'ai l'impression de m'etre perdu aussi dans tout ca,
Merci, en esperant pas avoir été trop compliqué :)

Jonathan

1 réponse


Salut.

Je te conseille d'utiliser le formattage avec trois "backtick" pour que ce soit plus lisible.

Ce que je fais dans ce genre d'interface pour rester le plus générique possible c'est de passer des attributs data- sur les éléments sur lesquels j'ajoute de l'interaction.

<ul id="lames">
    <li data-type="KB">Lame brillante</li>
    <li data-type="KB2">Lame brillante deux</li>
</ul>

Ensuite quand tu mets un écouteur de clic sur #lames (comme on avait vu pour une question précédente) alors tu récupères l'attribut data-type et tu sais quelle image c'est : /img/produits/fabriquer/${type}.png. Tu peux aussi ajouter data-id qui sera l'ID de la lame dans votre base de données.

Et quand t'as les 3 infos dont tu as besoin tu vas chercher le couteau dont les 3 propriétés lame, manche et matière correspondent à la sélection.

Pas facile d'expliquer comme ça, il y a tellement de choses à dire ! ^^