How to activate an event from a class change

Question

How to activate an event from a class change

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

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 test2 class received the current class. I tried to do with an on change in the document but I was not successful.

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><divid="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>

javascript jquery eventos

asked by anonymous 02.01.2017 / 15:35

2 answers

2

For your case, since you are using only classes you can use length to fetch elements, if 0 is because there is no element with class "test2" with class "current". example: $('.teste2.current').length > 0

Another alternative is if you use the element with id attribute you could use hasClass(); , 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><divid="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>

02.01.2017 / 16:15

My character follows the mouse, but keeps turning upside down How to work with authorization levels with PHP? [closed]

score 2 · Accepted Answer

Haykou is formalizing the answer, as your code already works as you wish, only missing the current validation and background change,

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