toggleClass для разных функций

Question

Я думаю, что этот код не работает, потому что при загрузке DOM jQuery кэширует свои объекты и связывает функции с ними?

$('span.button.slide_out').on('click', function() { 
    $(this).toggleClass('slide_out').toggleClass('slide_in'); 
    $('#testbox').slideDown(); 
}); 

$('span.button.slide_in').on('click', function() { 
    $(this).toggleClass('slide_out').toggleClass('slide_in'); 
    $('#testbox').slideUp(); 
}); 

Я знаю, что я мог бы написать это легко с slideToggle или что-то еще, но я должен стрелять различные действия на каждом первом и каждый второй клик. Как я могу достичь этого, используя тот же селектор (вместо создания двух разных селекторов)?

JS FIDDLE

Answer 1

Связывание действительно делается на создание DOM, но это не должно быть проблемой в этом случае, это также означает, что кнопка все еще нажата, если он больше не имеет slide_out класс. Поэтому вы можете повторно использовать одно и то же событие click и проверить текущее состояние, чтобы выбрать, перемещаться ли вверх или вниз. Например:

$('.slide_out').on('click', function() { 
    if($(this).toggleClass('slide_out slide_in').hasClass('slide_in')) 
    $('#testbox').slideDown(); 
    else 
    $('#testbox').slideUp(); 
}); 

Fiddle

Answer 2

Вы можете использовать раствор из Event binding on dynamically created elements?, как это было предложено https://stackoverflow.com/users/502381/juhana:

HTML:

<span class="button_container"><span class="button slide_out">Click me</span></span> 
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div> 

JS:

$('.button_container').on('click', '.slide_out', function() { 
    $(this).toggleClass('slide_out').toggleClass('slide_in'); 
    $('#testbox').slideDown(); 
}); 

$('.button_container').on('click', '.slide_in', function() { 
    $(this).toggleClass('slide_out').toggleClass('slide_in'); 
    $('#testbox').slideUp(); 
}); 

http://jsfiddle.net/ag3cpcfb/

Но, на мой взгляд, было бы лучше, чтобы сделать код более простым с помощью slideToggle() и настроить CSS классы:

HTML:

<span class="button">Click me</span> 
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div> 

JS:

$('.button').on('click', function() { 
    var $testbox = $('#testbox'); 

    if ($testbox.is(':visible')) { 
     console.log('Click 1'); 
    } else { 
     console.log('Click 2'); 
    } 

    $(this).toggleClass('slide_in'); 
    $testbox.slideToggle(); 
}); 

http://jsfiddle.net/k77ferjh/

Но это постоянно срабатывает, когда вы нажимаете кнопку. Если это не проблема, хорошо, если он есть, вы можете также использовать номер для отслеживания ваших кликов:

JS:

var clicks = 0; 

$('.button').on('click', function() { 
    clicks++; 

    if (clicks % 2 == 0) { 
     console.log('Slide out'); 
    } else { 
     console.log('Slide in'); 
    } 

    $(this).toggleClass('slide_in'); 
    $('#testbox').slideToggle(); 
}); 

http://jsfiddle.net/k77ferjh/1/