I am facing an issue with applying colors to the label colorCheckBox, each with a unique data-id that is derived from the variable colorBoxId, which is globally accessible using
colorBoxId = $(this).closest('tr').data('id');Upon clicking the label, a div with class "colorList" and id "colorSelectFilter" will be displayed:
<div class="colorList" id="colorSelectFilter" style="display:none; padding: 20px;">
<a href="#" data-value="1">Green(Approve)<div class="greenBox"></div></a>
<a href="#" data-value="2">Red(Turn off)<div class="redBox"></div></a>
<a href="#" data-value="3">Yellow(Check)<div class="yellowBox"></div></a>
</div>
Subsequently, upon selecting a color from colorSelectFilter, the following jQuery function is triggered:
const colors = [null, 'green', 'red', 'yellow'];
$("#colorSelectFilter").find('a').click(function(event){
event.preventDefault();
const filter = parseInt($(this).data('value'));
alert(colorBoxId + "Will be sent to ajax!!");
var totalColor = colors[filter];
console.log(colors[filter] + "ErrandSelect");
if (!isNaN(filter)) {
// The issue lies here; all labels are affected
$('.colorCheckBox').css('background-color', colors[filter]);
}
});
My objective is to apply the color solely to the label that is being clicked on. Any advice or suggestions on how to achieve this would be greatly appreciated.