Hinzufügen/Entfernen einer Hintergrundfarbe mit jQuery und html5 Datenattribute

Question

Ich versuche, eine eindeutige Hintergrundfarbe auf die Beschriftung der Kontrollkästchen hinzuzufügen, wenn sie angeklickt werden (die Kontrollkästchen selbst sind ausgeblendet). Ich kann es bekommen, um die Hintergrundfarbe hinzuzufügen, aber es wird es nicht entfernen, sobald es angewandt wird. Was ich habe (https://jsfiddle.net/9oq88dro/):

CSS

label {user-select:none} 
input {position: absolute; left: -9999px;} 

HTML

<div class="container"> 
    <input id="1" type="checkbox" value="test 1"><label for="1" data-color="red">test 1</label> 
    <input id="2" type="checkbox" value="test 2"><label for="2" data-color="blue">test 2</label> 
    <input id="3" type="checkbox" value="test 3"><label for="3" data-color="green">test 3</label> 
</div> 

jQuery

$('.container label').on('click', function() { 
    if ($(this).css('background-color', '')) { 
    $(this).css('background-color', $(this).data("color")); 
    } else { 
    $(this).css('background-color', ''); 
    } 
}); 

Answer 1

Some Die Browser geben background-color in rgb() und rgba() zurück, nicht unbedingt den Farbnamen, den Sie angegeben haben. Wenn Sie die Farbe nur ein- und ausschalten möchten, können Sie eine Klasse umschalten, um den Status zu bestimmen.

$('.container label').on('click', function() { 
 
    var color = $(this).data('color'); 
 
    if (!$(this).hasClass('color')) { 
 
    $(this).css('background-color', color); 
 
    $(this).addClass('color'); 
 
    } else { 
 
    $(this).css('background-color', 'transparent'); 
 
    $(this).removeClass('color'); 
 
    } 
 
});

label { 
 
    user-select: none 
 
} 
 

 
input { 
 
    position: absolute; 
 
    left: -9999px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <input id="1" type="checkbox" value="test 1"> 
 
    <label for="1" data-color="red">test 1</label> 
 
    <input id="2" type="checkbox" value="test 2"> 
 
    <label for="2" data-color="blue">test 2</label> 
 
    <input id="3" type="checkbox" value="test 3"> 
 
    <label for="3" data-color="green">test 3</label> 
 
</div>

Answer 2

Sieht aus wie CSS rgba(0, 0, 0, 0) zurückkehrte. Sie könnten nur die Dom-Eigenschaften verwenden, wenn Sie wollten.

$('.container label').on('click', function() { 
 
    if (!this.style.backgroundColor) { 
 
    this.style.backgroundColor = $(this).data("color"); 
 
    } else { 
 
    this.style.backgroundColor = ''; 
 
    } 
 
});

label {user-select:none} 
 
input {position: absolute; left: -9999px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <input id="1" type="checkbox" value="test 1"><label for="1" data-color="red">test 1</label> 
 
    <input id="2" type="checkbox" value="test 2"><label for="2" data-color="blue">test 2</label> 
 
    <input id="3" type="checkbox" value="test 3"><label for="3" data-color="green">test 3</label> 
 
</div>