bgrins / spectrum

The No Hassle JavaScript Colorpicker
https://bgrins.github.io/spectrum/
MIT License
2.32k stars 588 forks source link

get parent div ID of a color picker #467

Closed karthiksd9 closed 7 years ago

karthiksd9 commented 7 years ago

i have 2 color picker inside 2 different div.

<div class="panel-heading" style="width:100%" id="h1">
<span style="float:right; padding-right:10px;" class="close"> <input type='text' class="basic" id="t1"/> </span>
</div>

<div class="panel-heading" style="width:100%" id="h2">
<span style="float:right; padding-right:10px;" class="close"> <input type='text' class="basic" id="t2"/> </span>
</div>

and this is my spectrum chart picker JS:

$(document).ready(function () {
            $(".basic").spectrum({
                color: "rgb(244, 204, 204)",
                showPaletteOnly: true,
                hideAfterPaletteSelect: true,
                change: function (color) 
                {
                    setBackgroundColor(color);
                },
                palette: [
                    ["rgba(168, 255, 102, 0.29)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
                    "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
                    "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"]
                    ]
            });
});

Now inside setBackgroundColor() function how can i get to know which color picker div i have selected. i.e H1 or H2. Please help me. Thanks in advance.

karthiksd9 commented 7 years ago

i found the solution :

change: function (color) 
{
   $(this).parent().parent().css('background',color);
},

this will change the background color of parent div element(i.e h1 or h2)