Estou com o seguinte problema, fiz setas de navegação para alguns elementos e dependendo do elemento ativo, preciso mudar o CSS de outro elemento.
No exemplo abaixo eu precisaria mudar por exemplo o background do body para uma cor específica, toda vez que que a classe teste2 recebesse a classe current. Tentei fazer com um on change no documento porém não tive sucesso.
var $divs = $('.box').children(".teste"),
index = 0;
$("#next").click(function() {
updateStatus(1);
});
$("#prev").click(function() {
updateStatus(-1);
});
function updateStatus(a) {
$divs.eq(index).removeClass("current").hide();
index += a;
$divs.eq(index).addClass("current").show();
$("#next").toggle((index !== $divs.length - 1));
$("#prev").toggle(index !== 0);
}
.box{
height:100px;
width:100px;
outline:1px solid red;
}
.teste{
height:50px;
width:50px;
}
.teste1{
background:#ccc;
}
.teste2{
display:none;
background:red;
}
.teste3{
display:none;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prev">Prev</div>
<div id="next">Next</div>
<div class="box">
<div class="teste teste1"></div>
<div class="teste teste2"></div>
<div class="teste teste3"></div>
</div>