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/]()