How to activate an event from a class change

Question

I have the following problem, I made navigation arrows for some elements and depending on the active element, I need to change the CSS of another element.

In the example below I would need to change for example the background of the body to a specific color, every time the class teste2 receive the class Current. I tried to do with an on change in the document but did not succeed.

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>

Answer 1

For your case, as you are only using classes you can use length to search for elements, if it comes 0 it is because there is no element with class "teste2" with class "Current". example: $('.teste2.current').length > 0

Another alternative is to use the attribute element id you could use the hasClass();, for example: HTML:

<div id="teste2" class="teste"></div>

Javascript(jquery):

$('#teste2').hasClass('current')

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);
        if($('.teste2.current').length > 0){
           $('.box').css('background-color', 'black');
        }else{
           $('.box').css('background-color', '#FFFFFF');
        }
    }

.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>

Answer 2

Haykou just formalizing the answer, as his code already works as you wish, missing only the Current validation and background exchange, follows;

Script

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();
    if(index == 2){
     $("body").css("background-color":"#ddd");
    }else{
     //outra cor por exemplo
     //ou pode aumentar a quantidade de validações para outras cores.
    }
    $("#next").toggle((index !== $divs.length - 1));
    $("#prev").toggle(index !== 0);
}