Pure Javascript add class function [can’t be left 2015/2016]

Asked

Viewed 2,414 times

4

Good morning to all.

I made an effect in which I click on a div and swap the image with css animation effect. In this case, I used jquery addClass/toggleClass (I used the 2).

But I wanted to make a script using pure Javascript. I have seen some tutorials, but several different and complex forms. There is some simpler way?

$('#btnPack1').on('click', function() {
  $('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').addClass('active');
});

//$('#btnPack1').on('click', function(){
//	$('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').toggleClass('active');
//});
#corpo {
  width: 1024px;
  height: 768px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#pack1 {
  position: absolute;
  width: 890px;
  top: 160px;
  left: 78px;
}

#btnPack1 {
  position: absolute;
  width: 60px;
  height: 100px;
  top: 378px;
  left: 65px;
  background: red;
}

#pack1.active {
  opacity: 1;
  -webkit-animation-name: fadeIn;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeIn {
  0% {
    left: 78px;
    opacity: 1
  }
  60% {
    opacity: 0;
  }
  100% {
    left: -1000px;
    opacity: 0;
  }
}

#pack2 {
  position: absolute;
  width: 981px;
  top: 0;
  opacity: 0;
  left: 1030px;
  height: 768px;
}

#imgPac2 {
  position: absolute;
  width: 654px;
  top: 183px;
}

#pack2.active {
  opacity: 0;
  -webkit-animation-name: pack2;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: .5s;
}

@-webkit-keyframes pack2 {
  0% {
    left: 1030px;
    opacity: 0
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 35px;
    opacity: 1;
  }
}

#imgBullet1 {
  width: 220px;
  position: absolute;
  top: 378px;
  left: 677px;
}

#imgBullet1.active {
  opacity: 0;
  -webkit-animation-name: imgBullet1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 2s;
}

@-webkit-keyframes imgBullet1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#imgBullet2 {
  width: 220px;
  position: absolute;
  top: 456px;
  left: 677px;
}

#imgBullet2.active {
  opacity: 0;
  -webkit-animation-name: imgBullet2;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 2.6s;
}

@-webkit-keyframes imgBullet2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#imgBullet3 {
  width: 220px;
  position: absolute;
  top: 540px;
  left: 677px;
}

#imgBullet3.active {
  opacity: 0;
  -webkit-animation-name: imgBullet3;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 3.4s;
}

@-webkit-keyframes imgBullet3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="corpo">

  <img id="pack1" class="" src="http://placehold.it/860x790">
  <div id="btnPack1"></div>

  <div id="pack2">
    <img id="imgPac2" class="" src="http://lorempixel.com/654/700/">

    <img id="imgBullet1" class="" src="http://placehold.it/280x50">
    <img id="imgBullet2" class="" src="http://placehold.it/280x50">
    <img id="imgBullet3" class="" src="http://placehold.it/280x50">
  </div>
</div>

Thank you all

javascript jquery css

2 answers

2


You can use the methods of classList

Element.classList.toggle('nome-da-class')
Element.classList.add('nome-da-class')
Element.classList.remove('nome-da-class')

Applying this to your code,

document.querySelector('#btnPack1').onclick = function() {
    Array.from(
        document.querySelectorAll('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3')
    ).forEach(el => el.classList.add('active'))
}

  • Thank you very much, I was searching here, in overflow, people indicated to use redex to do this. I was silly, use redex to do this. I didn’t know this method. Thank you very much.

  • I did that neither you asked, but it didn’t happen, I did that and it worked. Document.querySelector('#btnPack1'). onclick = Function() {&#xA; document.querySelector('#pack1').classList.add('active')&#xA; document.querySelector('#pack2').classList.add('active')&#xA; document.querySelector('#imgBullet1').classList.add('active')&#xA; document.querySelector('#imgBullet2').classList.add('active')&#xA; Document.querySelector('#imgBullet3').classList.add('active') }

0

Change this part of your script:

$('#btnPack1').on('click', function(){
    $('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').addClass('active');
});

For:

document.getElementById('btnPack1').onclick = function (){
    document.getElementById('pack1').class += 'active';
    document.getElementById('pack2').class += 'active';
    document.getElementById('imgBullet1').class += 'active';
    document.getElementById('imgBullet2').class += 'active';
    document.getElementById('imgBullet3').class += 'active';
}

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.