Javascript 切换不同函数的类

我猜这段代码不起作用，因为在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

或其他方法轻松编写，但我必须在每一次单击和每一秒单击时启动不同的操作。如何使用相同的选择器（而不是创建两个不同的选择器）实现这一点

---

绑定确实是在DOM创建时完成的，但在这种情况下，这并不一定是一个问题，它还意味着如果按钮不再具有

滑出类，则仍会单击该按钮。因此，您可以重复使用相同的单击事件并检查当前状态以选择是向上滑动还是向下滑动。例如：

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

您可以使用以下建议的解决方案：

HTML:


但是，在我看来，最好使用
slideToggle（）
并调整css类，从而简化代码：

HTML:


但如果你反复点击按钮，就会一直触发“点击1”。如果这不是问题，很好，如果是，您也可以使用数字来跟踪您的点击：

JS:

对不起，可能的重复我不明白可能的重复将如何回答我的问题。也许我会被困在盒子里！非常感谢@Learner为您提供的解决方案！非常感谢您抽出时间！
<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>

$('.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();
});

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

$('.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();
});

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();
});