Al principio, no quiero que .screen-text-page2 sea visible, solo después de hacer clic en .screen-text-button-page1
$('.screen-text-page2').removeClass("screen-text-page2"); $('.screen-text-button-page1').click(function() { $('.screen-text-page2').addClass("screen-text-page2"); }); .screen-text-page2 { background: pink; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="screen-text-button-page1">Button</button> <div class="screen-text-page2">Div with class screen-text-page2</div>Respuesta corta: Sí
El método removeClass no es un estado... una vez que lo ejecuta, la clase se elimina y el elemento puede aceptar cualquier clase nueva, incluida la misma.
Si desea volver a agregar la clase, simplemente agréguela nuevamente.
$("#ele").removeClass(".myClass"); $("#ele").addClass(".myClass");es completamente valido
Sí, pero debido a que está eliminando la clase, no podrá volver a seleccionarla a través $('.screen-text-page2') . Pero si guarda el elemento seleccionado como una variable, puede volver a hacer referencia a él sin necesidad de volver a seleccionarlo usando la clase.
let page2 = $('.screen-text-page2'); $(page2).removeClass("screen-text-page2"); $('.screen-text-button-page1').click(function() { $(page2).addClass("screen-text-page2"); }); .screen-text-page2 { background: pink; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="screen-text-button-page1">Button</button> <div class="screen-text-page2">Div with class screen-text-page2</div> Otra forma de hacer algo como esto es agregar otra clase antes de eliminar .screen-text-page2 y luego volver a seleccionar el elemento usando esta clase de marcador de posición. Pero en mi opinión, eso son solo más pasos que el ejemplo anterior.
$('.screen-text-page2').addClass("screen-text-page2-placeholder"); $('.screen-text-page2').removeClass("screen-text-page2"); $('.screen-text-button-page1').click(function() { $('.screen-text-page2-placeholder').addClass("screen-text-page2"); }); .screen-text-page2 { background: pink; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="screen-text-button-page1">Button</button> <div class="screen-text-page2">Div with class screen-text-page2</div>