When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code:
<% categories.each(function (category) { %>
<li id="<%= category.id %>" class="Round-boxes my-sortable">
<% if(category.get("is_owner")) { %>
<div class="color-picker-pencil picker">
<span class="glyphicon glyphicon-pencil"></span>
</div>
<% } %>
</li>
<% }); %>
I am referring to this tutorial and have made some adjustments in the following JavaScript code:
JS code:
applyColor: function(event) {
myel = $(event.target).parent().parent()
console.log(myel);
$('.picker').colpick({
layout: 'hex',
submit: 0,
colorScheme: 'dark',
onChange: function(hsb, hex, rgb, myel, bySetColor) {
$(myel).css('background-color:', '#' + hex);
}
}).keyup(function() {
$(this).colpickSetColor(this.value);
});
}