javascript - 如何在不同时间使用 jQuery 更改类？

Question

我有一个正在切换的隐藏 div。当它出现时，跨度会更改其类。

$('#websites').click(function(){
   $('#webthumbs').slideToggle('fast');
   $('#websites span').removeClass('icon-chevron-right').addClass('icon-chevron-down');
   $(this).addClass('open');
});

当 div 再次折叠和隐藏时，我需要将 span 的类改回原来的类。我试过这个但它不起作用:

$('#websites.open').click(function(){
   $('#websites span').removeClass('icon-chevron-down').addClass('icon-chevron-right');
   $(this).removeClass('open');
});

我感觉第二段代码不起作用，因为加载脚本时 .open 不在 DOM 中。我怎样才能让第二段代码工作？

Answer 1

你只需要切换类来切换图标

$('#websites').click(function(){
   $('#webthumbs').slideToggle('fast');
   $('#websites span').toggleClass('icon-chevron-right icon-chevron-down');
});

代码不起作用的原因是因为事件处理程序在执行时添加到与选择器匹配的元素，稍后添加类没有区别。

如果你需要切换 jQuery 没有提供内置方法的东西，你可以使用一个标志

$('#websites').click(function(){

    var flag = $(this).data('flag');

    if ( flag ) {
        // do anything when the state is "open"
        $('#webthumbs').slideUp('fast');
    } else {
        // do anything when the state is "closed"
        $('#webthumbs').slideDown('fast');        
    }

    $(this).data('flag', !flag);
});