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

$('.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/

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

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/

toggleClass用于不同的功能

2 个答案: