Forum : Aide javascript

Réponse acceptée

Hello,

si tu débutes dans le javascript, ce que tu essaies de faire doit être pour t'entraîner car il existe plein de module (color picker et color palette), donc autant que faire se peut évite de réinventer la roue.

Ce que je t'expliquai c'était plus un problème d'algorithme, voici comment faire:

Code HTML

<div class="parent">
  <input type="text" value="" id="color-name">
  <input type="text" value="" id="color-value">
  <div class="currentSelectedColor" style=""></div>

  <hr>
  <div class="color-selection">
      <span class="swatch active" title="white" data-color="#FFFFFF" data-name="white" style="background-color: rgb(255,255,255);"></span>
      <span class="swatch" title="primary" data-color="#E91E63" data-name="primary" style="background-color: rgb(233, 30, 99);"></span>
      <span class="swatch" title="primary_dark" data-color="#C2185B" data-name="primary_dark" style="background-color: rgb(194, 24, 91);"></span>
      <span class="swatch" title="primary_light" data-color="#F8BBD0" data-name="primary_light" style="background-color: rgb(248, 187, 208);"></span>
      <span class="swatch" title="accent" data-color="#CDDC39" data-name="accent" style="background-color: rgb(205, 220, 57);"></span>
      <span class="swatch" title="primary_text" data-color="#212121" data-name="primary_text" style="background-color: rgb(33, 33, 33);"></span>
      <span class="swatch" title="secondary_text" data-color="#727272" data-name="secondary_text" style="background-color: rgb(114, 114, 114);"></span>
      <span class="swatch" title="divider" data-color="#B6B6B6" data-name="divider" style="background-color: rgb(182, 182, 182);"></span>
</div>

Code CSS

.currentSelectedColor {
  display: inline-block;
  width: 50px;
  height: 50px;
  outline: 1px solid #bbb;
  border: 2px solid #fff;
}
.swatch {
  position: relative;
  display: inline-block;
  font: 0/0 a;
  width: 12.66%;
  padding-top: 11.00%;
  margin: 1% 2%;
  outline: 1px solid #bbb;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}

.active::after {
  content: "X";
  position: absolute;
  color: blue;
  font-size: 25px;
  left: 50%;
  top: 50%;
}

Code JS:

$(document).ready(function () {
    console.log("ready")
    var div = document.querySelectorAll('span.swatch');
    // On set la couleur par défaut
    var currentColorName = $("#color-name").val() || "white";
    var currentColorValue = $("#color-value").val() || "#ffffff";
    var displaySelectedColor = $("div.currentSelectedColor");
    var currentSelectedColor = $("span.swatch.active");

    // On applique la couleur par défaut sur les sélecteurs
    $("#color-name").val(currentColorName);
    $("#color-value").val(currentColorValue);
    displaySelectedColor.css("background-color",currentColorValue);

    for (var i = 0; i < div.length; i ++ )
    {
        div[i].addEventListener('click', function (event) {

          // On enlève la classe active sur l'ancienne couleur sélectionnée
          currentSelectedColor.removeClass("active");

          // On assigne les nouvelles infos
          currentColorValue = $(event.target).data("color");
          currentColorName = $(event.target).data("name");

          // On les affiches
          $("#color-name").val(currentColorName);
          $("#color-value").val(currentColorValue);
          displaySelectedColor.css("background-color",currentColorValue);

          // On assigne l'objet nouvelle couleur sélectionnée
          currentSelectedColor = $(event.target);

          // On ajoute la classe active sur la nouvelle couleur sélectionnée
          currentSelectedColor.addClass("active");
        })
    }
});

Les infos sur les couleurs (nom et valeur) se trouvent dans les attributs data-color et data-name de chaque couleur (<span>)
Lors d'un clic, on récupère ces valeurs.
Voici l'exemple qui fonctionne avec le code ci-dessus: [https://jsfiddle.net/fqgnjaw3/1/]()

kubz

une piste comme ça:
tu store la value (checked) et tu store l'item sélectionné dans une variable (ex: checkedItem)

Au moment de l'event click, dans l'event (e), tu as l'élément en target (élément cliqué), à ce moment là:

tu peux add/remove une classe css sur checkedItem (pour lui enlever la coche de sélection)
tu changes la valeur checked
tu remplaces checkedItem avec la target de l'event
tu peux ajouter une classe sur checkedItem pour indiquer qu'il a été select

(je n'ai pas vérifier mes dires mais c'est ce que je ferai, il y a sûrement plus simple).

Rémi 35

Auteur

Ses pas des checkBox mais des div

kubz

et donc ? ça ne change rien, je n'ai jamais indiqué de save des valeurs ou de changer une valeur.
juste d'ajouter et/ou de supprimer des classes CSS ;) (checked/not-checked)

ps: ne le prend pas mal mais tes fautes me donnent envie de m'arracher les yeux ;) je te recommande: [https://www.scribens.fr]() ou [http://www.cordial-enligne.fr/]()

Rémi 35

Auteur

Merci pour ton aide me je ne comprend pas trop je débute dans le JavaScript

Rémi 35

Auteur

J'ai essayer sa mais cela ne marche pas

$(document).ready(function () {

    var div = document.querySelectorAll('#colorProfil');
    var checked = '.checkmorray';
    var ClassCheck = 'checkmorray';

    for (var i = 0; i < div.length; i ++ )
    {
        div[i].addEventListener('click', function (e) {

          var test = document.getElementsByClassName('.checkmorray');

            if(test == undefined){

                $(test).removeClass('checkmorray');
            }else{
                $(this).addClass('checkmorray');
            }

        })
    }
});

Rémi 35

Auteur

Je te remercie pour t'on aide je comprend mieux maintenant

Aide javascript

7 réponses