2

Cambio de class un div con jquery, pero cuando intento usar jquery con el class al que e cambiado no funciona.

$('.ver_drop').click(function() {
  $( this ).text( "Ocultar drop" );
  $( this ).toggleClass( "ocultar_drop" );
  $( this ).removeClass( "ver_drop" );
  $('.ember-view.win-feed-header').css('display', 'initial');
});

$('.ocultar_drop').click(function() {
  $( this ).text( "Ver drop" );
  $( this ).toggleClass( "ver_drop" );
  $( this ).removeClass( "ocultar_drop" );
  $('.ember-view.win-feed-header').css('display', 'none');
});

$('.ver_tickets').click(function() {
  $( this ).text( "Ocultar tickets" );
  $( this ).toggleClass( "ocultar_tickets" );
  $( this ).removeClass( "ver_tickets" );
  $('.scrollbox').css('display', 'initial');
});

$('.ocultar_tickets').click(function() {
  $( this ).text( "Ver tickets" );
  $( this ).toggleClass( "ver_tickets" );
  $( this ).removeClass( "ocultar_tickets" );
  $('.scrollbox').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="ember-view win-feed-header" style="display:none">
Ember view
</h1>
<h1 class="scrollbox" style="display:none">
scrollbox
</h1>
<a class="ver_drop">Ver drop</a>&nbsp;&nbsp;&nbsp;<a class="ver_tickets">Ver tickets</a>

1
  • 1
    Kaiserdj, edita tu pregunta y solo publica el codigo relevante.
    – Einer
    Commented el 2 oct. 2017 a las 15:40

2 respuestas 2

2

Deberías hacer algo así:

$(document).on('click', '.ver_drop', function() {
  $( this ).text( "Ocultar drop" );
  $( this ).addClass( "ocultar_drop" );
  $( this ).removeClass( "ver_drop" );
  $('.ember-view.win-feed-header').css('display', 'initial');
});

$(document).on('click', '.ocultar_drop', function() {
  $( this ).text( "Ver drop" );
  $( this ).addClass( "ver_drop" );
  $( this ).removeClass( "ocultar_drop" );
  $('.ember-view.win-feed-header').css('display', 'none');
});

$(document).on('click', '.ver_tickets', function() {
  $( this ).text( "Ocultar tickets" );
  $( this ).addClass( "ocultar_tickets" );
  $( this ).removeClass( "ver_tickets" );
  $('.scrollbox').css('display', 'initial');
});

$(document).on('click', '.ocultar_tickets', function() {
  $( this ).text( "Ver tickets" );
  $( this ).addClass( "ver_tickets" );
  $( this ).removeClass( "ocultar_tickets" );
  $('.scrollbox').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="ember-view win-feed-header" style="display:none">
Ember view
</h1>
<h1 class="scrollbox" style="display:none">
scrollbox
</h1>
<a class="ver_drop">Ver drop</a>&nbsp;&nbsp;&nbsp;<a class="ver_tickets">Ver tickets</a>

Cuando cambias la clase de tus elementos la nueva clase es totalmente nueva para el dom y es una clase que se "activa" después de la carga inicial de tu JS por lo cual no es reconocida osea es como si no existiera, es por eso que debes cambiar tu método de selección para que sea reconocida en cualquier momento.

CONSEJO:

El toggleClass() se usa cuando se quiere alternar entre una misma clase es decir activarla o desactivarla, si lo que quieres hacer es eliminar una clase específica y luego agregar otra clase específica lo mejor es usar addClass() o removeClass()

Espero haber sido claro, saludos !

1

Yo acomodaría el código algo así:

HTML

<h1 class="ember-view win-feed-header ishidden">
        Ember view
    </h1>
    <h1 class="scrollbox ishidden">
        scrollbox
    </h1>
    <a class="ver_drop">Ver drop</a>&nbsp;&nbsp;&nbsp;<a class="ver_tickets">Ver tickets</a>

CSS (Agregar la clase con el atributo display none)

.ishidden{
    display: none;
}

JS

$('.ver_drop').click(function() {
    $('.ember-view.win-feed-header').toggleClass('ishidden');
    if ($('.ember-view.win-feed-header').hasClass("ishidden")) {            
        $( this ).text( "Ver Drop" );               
    } else {        
        $( this ).text( "Ocultar Drop" );
    }
});

$('.ver_tickets').click(function() {
    $('.scrollbox').toggleClass('ishidden');
    if ($('.scrollbox').hasClass("ishidden")) {
        $( this ).text( "Ver tickets" );                        
    } else {            
        $( this ).text( "Ocultar tickets" );
    }
});

Con esto puedes dejarlo solo en 2 funciones y sin necesidad de cambiar clases

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.