Remove click with JQuery after clicking another element

Navigation
2

Whenever I click the label that is inside flags it should apply a background-color . It's working. What happens, is that when I click on a div, it applies the background correctly, but when I click on another, I want it to remove the background-color from the previous div and leave it applied only to the current one. 

$('.bandeiras label').click(function() {
  $(this).css('background-color', '#8a8383');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="bandeiras cf">
  <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
  <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle"></label>
  <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master"><img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle"></label>
  <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners"><img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle"></label>
  <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo""><img src="/assets/images/cartoes/elo.png" alt="Elo" title="Elo" align="absmiddle"></label>
</div>
    
asked by anonymous 29.05.2018 / 05:13

2 answers

2

You can change the background-color of all elements at once to the default value before applying the new color to the clicked element: 

$('.bandeiras label').click(function() {
   $('.bandeiras label').css("background-color", "rgb(138, 131, 131)");
   $(this).css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="bandeiras cf">
  <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
  <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle"></label>
  <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master"><img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle"></label>
  <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners"><img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle"></label>
  <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo"><img src="/assets/images/cartoes/elo.png" alt="Elo" title="Elo" align="absmiddle"></label>
</div>

Picking up the original color automatically 

var cor_padrao;
$('.bandeiras label').click(function(){
   cor_padrao = cor_padrao || $(this).css("background-color");
   $('.bandeiras label').css("background-color", cor_padrao);
   $(this).css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="bandeiras cf">
  <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
  <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle"></label>
  <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master"><img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle"></label>
  <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners"><img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle"></label>
  <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo"><img src="/assets/images/cartoes/elo.png" alt="Elo" title="Elo" align="absmiddle"></label>
</div>
    
29.05.2018 / 05:31
2

You can use the jQuery siblings for this. When you add a css to a vc, it removes the css from the siblings. 

$('.bandeiras label').click(function() {
  $(this).css('background-color', '#f00').siblings().css('background-color', '#8a8383');
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divclass="bandeiras cf">
    <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
        <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle">
    </label>
    <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master">
        <img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle">
    </label>
    <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners">
        <img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle">
    </label>
    <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo">
        <img src="/assets/images/cartoes/elo.png" alt="Elo " title="Elo" align="absmiddle">
    </label>
</div>
    
29.05.2018 / 05:34
Why use readonly to instantiate? Is there any way to dynamically add attribute to instantiated object in C #?