cambiar color con jquery

alternar y cambiar colores con jquery

by femfoyou

HTML

<table id="facCode">
    <tr>
        <td>hello1</td>
    </tr>
    <tr>
        <td>hello2</td>
    </tr>
    <tr>
        <td>hello3</td>
    </tr>
</table>

<button id="uno">rojo</button>
<button id="dos">azul</button>
<button id="tres">color</button>

<button id="cuatro">C/F</button>
<button id="cinco">C/F 2</button>

<div id="micolor" class="otrocolor">cambio de color</div>

<p id="celfar">CCC</p>
<p class="pushme">pulsa</p>

<p id="PushDontpush">pulsa</p>

CSS

.green, tr:active{
    background:lightgreen !important;
}
.blue{
    background:blue;
}
.yellow{
    background:yellow;
}
.otrocolor {
  padding: 10px;
  border:1px solid black;
}

JavaScript

$('#facCode').find('tr').on('click', function(){
        $(this).toggleClass('green');
    })
    
    $('#facCode tr:odd').addClass('blue');
    $('#facCode tr:even').addClass('yellow');


$('#uno').on('click', function(){
        $('#micolor').addClass('green');
        $('#micolor').removeClass('blue');
})
$('#dos').on('click', function(){
        $('#micolor').addClass('blue');
        $('#micolor').removeClass('green');
})

$('#tres').click(function(){
  $('#micolor').toggleClass('blue');
});


$('#cuatro').click(function() {
  $('#celfar').text('fff');
  }, function() {
   $('#celfar').text('ccc');
});
$('#cinco').click(function() {
  if ($('#celfar').text() == "ccc"){ 
     $('#celfar').text("fff"); 
  } 
  else { 
     $('#celfar').text("ccc"); 
  };
});

$(".pushme").toggle(function() {
          $(this).text("DON'T PUSH ME");
        }, function() {
          $(this).text("PUSH ME");
});


$('#PushDontpush').click(function() { 
  if ($(this).text() == "ccc"){ 
     $(this).text("fff"); 
  } 
  else { 
     $(this).text("ccc"); 
  }; 
});