Quiero hacer que estos dos divs siempre tengan ángulos de inclinación opuestos. Pero no funciona y cuando hago clic en el cuerpo, tienen el mismo valor de sesgo. ¿Sabe alguien cómo corregirlo? ¡Gracias!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="div1 content skew1"> </div> <div class="div2 content skew2"> </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"); } }); });El problema es que .removeClass y .addClass operan en TODOS los elementos en .content . Lo que significa que después de un clic tendrán exactamente las mismas clases. Utilice .toggleClass en su lugar.
Ejemplo:
Cuando su aplicación se ejecuta, $('.content') devolverá [ <div1 class="skew1">, <div2 class="skew2"> ]
En el primer clic .removeClass('skew1') devolverá [ <div1>, <div2 class="skew2"> ]
Luego, .addClass('skew2') devolverá [ <div1 class="skew2">, <div2 class="skew2"> ]
$(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 class="div1 content skew1"> </div> <div class="div2 content skew2"> </div>Esto debería ayudar:
$(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"); } }); });puedes hacer esto usando 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 class="div1 content skew1"> </div> <div class="div2 content skew2"> </div>