0

he escrito la siguientes líneas de código y está funcionando, pero tengo un par de dudas.

  1. Cuando hago click sobre un open, este pasa a closed y debería quedarse en open.

  2. Es posible que el código sea redundante? ya que voy a crear más "blurbs" y quizás termine siendo inmanejable

    <script type="text/javascript">
     jQuery(document).ready(function() {
     jQuery('.blurb-1').click(function(e){
     e.preventDefault();jQuery(".text-1").show(300);
     jQuery('.blurb-1').toggleClass('opened closed');
     jQuery('.blurb-2').removeClass('opened');
     jQuery('.blurb-2').addClass('closed');
     jQuery('.blurb-3').removeClass('opened');
     jQuery('.blurb-3').addClass('closed');
    
2
  • 1
    Agrega el html también para poder verificar como va a ser el comportamiento
    – DavElsanto
    Commented el 23 feb. 2023 a las 14:45
  • Juanma, si aún no lo has hecho, te sugiero hacer el recorrido para que conozcas las normas de la comunidad y de paso vas ganando medallas. También te sugiero que aceptes una respuesta (con el check del lado izquierdo) si te fue útil, con esto gana reputación quien te responde y tú mismo, además de servir de referencia para futuros visitantes.
    – DjCrazy
    Commented el 25 feb. 2023 a las 17:51

2 respuestas 2

1

Para tu duda numero 1 Por qué se va la clase? El fragmento de codigo

jQuery('.blurb-1').toggleClass('opened closed');

Va a agregar o quitar las 2 clases opened closed en donde se encuentre la clase blurb-1. En si toggleClass le puedes pasar las clases que quieras y estas van a ser agregadas o quitadas del selector al que estas llamando en este caso .blurb-1.

jQuery('.blurb-1').toggleClass('clase1 clase2 clase3 clase4');

supongamos que el valor inicial en blurb-1 es:

<div class="blurb-1"></div>

al ejecutar el toggleClass de este ejemplo pasaría a:

<div class="blurb-1 clase1 clase2 clase3 clase4"></div>

y al ejecutarlo nuevamente volvería al valor inicial es decir:

<div class="blurb-1"></div>

Para tu duda numero 2 Código inmanejable?

Personalmente te recomiendo que los separes en pequeñas funciones para cada clase EJ:

jQuery(document).ready(function() {
    e.preventDefault();
    jQuery(".text-1").show(300);
    jQuery('.blurb-1').click(function(e){
        clasesBlurb1();
    });
    jQuery('.blurb-2').click(function(e){    
        clasesBlurb2();
    });
    jQuery('.blurb-3').click(function(e){
        clasesBlurb3();
    });
    ...
    jQuery('.blurb-N').click(function(e){
        clasesBlurbN();
    });
    jQuery('.blurb-Z').click(function(e){
        clasesBlurbSuperPower();
    });
}

function clasesBlurb1(){
    jQuery('.blurb-1').click(function(e){
    jQuery('.blurb-1').toggleClass('opened closed');
}

function clasesBlurb2(){
    jQuery('.blurb-2').removeClass('opened');
    jQuery('.blurb-2').addClass('closed');
}

function clasesBlurb3(){
   jQuery('.blurb-3').removeClass('opened');
   jQuery('.blurb-3').addClass('closed');
}

function clasesBlurbSuperPower(){
   jQuery('.blurb-1').removeClass('claseAsombrosa');
   jQuery('.blurb-2').addClass('Animacion');
   jQuery('.blurb-3').addClass('claseAsombrosa2');
}

De esta forma tendrías el comportamiento separado por cada "Caso"

Espero te sirva saludos.

1
  • Discrepo contigo en el manejo de funciones por separado ya que, parafraseando al OP, sería inmanejable en caso de crear muchos elementos similares. El código debe ser lo más dinámico posible para evitar tener una función por cada elemento nuevo creado. Piensa por ejemplo, ¿Qué pasa si se maquetan de manera dinámica tantos elementos como resultados se obtengan de una base de datos?
    – DjCrazy
    Commented el 25 feb. 2023 a las 17:41
0

A falta de detalles en tu pregunta y sospechando que con una sola respuesta resuelvo tus dos dudas, me aventuro a responder lo siguiente...

Creo que la clase closed sobra, ya que al eliminar la clase opened se obtiene el resultado esperado.

Suponiendo que los elementos son botones y lo que queremos es cambiar el color del background al hacer click en uno o en otro.

Lo único que debes hacer es asignarles a todos los botones una misma clase y cuando se detecte el evento click con jQuery, le eliminas la clase opened a todos los elementos que comparten la clase y posteriormente le agregas la clase opened solo al elemento al que se hizo click, apoyándote en el selector this que hace precisamente eso, ejecutar una acción en el elemento con el que se está interactuando en el DOM.

$('.blurb').click(function(e) {
  e.preventDefault();
  //Eliminar la clase opened a todos los elementos
  $('.blurb').removeClass('opened');
  //Agregar la clase opened solo al elemento al que se hizo click
  $(this).addClass('opened');
});
.blurb {
  background-color: green;
  color: white;
}

.opened {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blurb">blurb-1</button>
<button class="blurb">blurb-2</button>
<button class="blurb">blurb-3</button>
<button class="blurb">blurb-4</button>
<button class="blurb">blurb-5</button>

Con esto en mente, toggleClass pasaría a ser innecesario, ya que su función es alternar entre poner/quitar una clase cada vez que haces click a cada botón. A no ser que sea lo que estás buscando y en cuyo caso te recomendaría abrir una nueva pregunta para abordar ese tema por separado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.