When changing class with Jquery, then Jquery no longer works

2

Change class a div with jquery, but when I try to use jquery with the class that I changed it does not work.

$('.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>
    
asked by Kaiserdj 02.10.2017 в 17:34
source

2 answers

2

You should do something like this:

$(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>

When you change the class of your elements the new class is totally new for the Sun and it is a class that is "activated" after the initial load of your JS, so it is not recognized as it does not exist, it is that is why you must change your selection method to be recognized at any time.

TIP:

The toggleClass() is used when you want to toggle between the same class ie activate or deactivate it, if what you want to do is delete a specific class and then add another specific class it is best to use addClass() or removeClass()

I hope I have been clear, greetings!

    
answered by 02.10.2017 / 17:44
source
1

I would arrange the code something like this:

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 (Add the class with the attribute 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" );
    }
});

With this you can leave it alone in 2 functions and without changing classes

    
answered by 02.10.2017 в 17:59