Multiple divs addClass and removeClass at the same time-CodePudding

I want to make these two divs always have opposite skew angles. But it doesn’t work and when I click on body, then they have the same skewY value. Does anyone know how to correct this? Thank you!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div >
</div>
<div >
</div>

.div1 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

.skew1 {
  transform: skewY(20deg);
  transition: transform 1s;
}

.skew2 {
  transform: skewY(-20deg);
  transition: transform 1s;
}

$(function () {
  $("body").on("click", function () {
    if ($(".content").hasClass("skew1")) {
      $(".content").removeClass("skew1").addClass("skew2");
    } else {
      $(".content").removeClass("skew2").addClass("skew1");
    }
  });
});

CodePudding user response：

The problem is that .removeClass and .addClass both operate on ALL the elements in .content. Which means after one click they will have exactly the same classes. Use .toggleClass instead.

Exmaple:
When your App runs $('.content') will return [ <div1 >, <div2 > ]
On the first click .removeClass('skew1') will return [ <div1>, <div2 > ]
Then, .addClass('skew2') will return [ <div1 >, <div2 > ]

$(function () {
  $("body").on("click", function () {
    $(".content").toggleClass("skew1 skew2");
  });
});

.div1 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

.skew1 {
  transform: skewY(20deg);
  transition: transform 1s;
}

.skew2 {
  transform: skewY(-20deg);
  transition: transform 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
</div>
<div >
</div>

CodePudding user response：

This should help:

$(function() {
  $("body").on("click", function() {
    const div1 = $(".div1");
    const div2 = $(".div2");
    if (div1.hasClass("skew1")) {
      div1.removeClass("skew1");
      div1.addClass("skew2");
      div2.removeClass("skew2");
      div2.addClass("skew1");
    } else {
      div1.removeClass("skew2");
      div1.addClass("skew1");
      div2.removeClass("skew1");
      div2.addClass("skew2");
    }
  });
});

CodePudding user response：

you can do this using toggleClass

$(function () {
  $("body").on("click", function () {
    $('.content').toggleClass('skew1').toggleClass('skew2')
  });
});

.div1 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

.skew1 {
  transform: skewY(20deg);
  transition: transform 1s;
}

.skew2 {
  transform: skewY(-20deg);
  transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div >
</div>
<div >
</div>