•  
     

Alternando Classes - jQuery

E se quisermos alternar o uso de uma classe? Isto é, e se quisermos que a jQuery verifique automaticamente se nosso texto #text está em destaque.highlighted, de forma que quando clicarmos nele a classe seja adicionada caso não esteja lá, e removida caso esteja?

Como você provavelmente adivinhou, a jQuery inclui uma função .toggleClass() que faz exatamente isso. Se o elemento no qual ela é chamada tiver a classe, .toggleClass() a remove; se o elemento selecionado não tiver a classe, .toggleClass() a adiciona.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>  
</body>
</html>



CSS

Código: Selecionar todos

#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){ 
$('#text').click(function(){
$(this).toggleClass('highlighted');
});
});


Clique no teste2 um monte de vezes: http://jsfiddle.net/0ma7nkkL/6/