3

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>

2
  • 1
    Não entendi totalmente, mas se a troca de current acontece no addClass, voce poderia fazer um if testando se o index é = 2 e se sim aplicar css via jquery $(body).css("background-color": "#ddd");
    – Covii
    Commented 2/01/2017 às 15:15
  • @Cleverson, era isso mesmo que eu precisava
    – haykou
    Commented 2/01/2017 às 15:51

2 Respostas 2

2

Haykou so formalizando a resposta, como seu código já funciona como deseja, faltando somente a validação do current e troca de background, segue;

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);
}
2

Para o seu caso, como você está usando apenas classes você pode utilizar o length para buscar elementos, caso vier 0 é porque não existe elemento com classe "teste2" com a classe "current". exemplo: $('.teste2.current').length > 0

Outra alternativa é você usar o elemento com atributo id você poderia usar o hasClass();, exemplo: 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .