用颜色填充盒子

Question

当我用colorCheckBox类推标签时，另一个div将显示一组颜色，该div称为colorSelectFilter。我有一套3种颜色。重点是然后推入具有不同类的链接，并使用colorCheckBox类将颜色添加到标签中

如果看图片，您会明白我的意思。 我遇到的问题是我需要一些有关如何填充标签的帮助。我尝试了几件事，但没有成功。任何指针和帮助都将非常不错。这是我的代码。

     echo '<td><label class="colorCheckBox">';
 echo '</td>';

<div class="colorList" id="colorSelectFilter" style="display:none; padding: 20px;">
    <a href="#" data-value="1">Grön(Godkännn)<div class="greenBox"></div></a>
    <a href="#" data-value="2">Röd(Slå av)<div class="redBox"></div></a>
    <a href="#" data-value="3">Gul(Kontrollera)<div class="yellowBox"></div></a>
</div>

         $('.colorCheckBox').on('click', function(e) {
            $(".colorList").css({
        'position': 'absolute',
        'left': $(this).offset().left,
        'top': $(this).offset().top + $(this).height() + 5
   }).toggle();
        });
        var colors = [];
            colors[1] = 'green';
            colors[2] = 'red';
            colors[3] = 'yellow'

 $("#colorSelectFilter").find('a').click(function(event){
        event.preventDefault();
        var filter = $(this).data('value');
        // Vilken rad jag trycker på, gör det med e.target
        // Den ska få css klass beronde på vilken färg jag trycker på
        var totalColor = colors[filter];
        console.log(colors[filter] + "ErrandSelect");

        $("#errands-filter tr:not(.toptr)").each(function(){
            console.log("TEST");
        });

    });

Answer 1

const colors = [null, 'green', 'red', 'yellow'];

$('.colorList a').click(function (event) {
    event.preventDefault();
    const filter = parseInt($(this).data('value'));

    if (!isNaN(filter)) {
        $('.colorCheckBox').css('background-color', colors[filter]);
    }
});