Color Sharepoint Calendar "Javascript" "Jquery"

Question

I have this code below for a calendar in Sharepoint 2013 That when user choose silver car in calendar field stay in silver color and when black stay in black color.

It only works on the IE browser, Firefox and Chrome does not work, anyone has any idea what it might be?

    <script src="/sites/SiteAssets/jquery-2.1.4.min.js"></script> 
<style>

.black{
    background-color: #383838;
}

.silver{
    background-color: #C8C8C8;
}
</style><script type="text/javascript">

    $(function(){
        $('.ms-acal-item').each(function(){
            $(':contains("Preto")',this).addClass('black');
            $(':contains("Prata")',this).addClass('silver');
        });
    });
</script>

Answer 1

Tiago, it’s very simple what you’re trying to do, so I figured just switch between CSS classes correct? Below is a code that does exactly the same thing and I believe it will not cause compatibility problems, just you reference the click of the "cars" as well as this referenced the ID of the Switch button.

$("#alternar").click(function() {
  if ($(".ms-acal-item").hasClass('black')) {
    $(".ms-acal-item").removeClass('black');
    $(".ms-acal-item").addClass('silver');
  } else {
    $(".ms-acal-item").removeClass('silver');
    $(".ms-acal-item").addClass('black');
  }
});

.black {
  background-color: #383838;
}

.silver {
  background-color: #C8C8C8;
}

.ms-acal-item {
  width: 100px;
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ms-acal-item'>
</div>

<button id='alternar'>
  Alternar Classe
</button>