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

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

$('#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中。如何让第二段代码正常工作

只需切换类即可切换图标

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

---

只需切换类即可切换图标

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

---

与前面的答案相同，您可以将两个单击处理程序合并为一个：

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

    $(this).toggleClass('open');
});

---

与前面的答案相同，您可以将两个单击处理程序合并为一个：

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

    $(this).toggleClass('open');
});

使用代理 您可以通过事件委派使用单独的基于状态的事件处理程序。不要将任一事件绑定到

#websites

元素，而是将事件处理程序绑定到最近的稳定父级（我在这里使用

'body'

，但您可能需要使用不同的选择器）：

委托语法将允许在

#网站上调用click回调。打开
元素，尽管它在绑定时不存在于DOM中

当两个状态之间的行为显著不同时，此表单特别有用


使用单个回调函数
如果您只是切换所有内容，我建议使用jQuery的切换函数，一次完成所有操作：

$('#websites').on('click', function () {
  $(this)
    .slideToggle('fast')
    .toggleClass('open')
    .find('span')
      .toggleClass('icon-chevron-right icon-chevron-down');
});

如果两种状态之间有单独的功能，可以使用简单的
If.is
检查：

$('#websites').on('click', function () {
  if ($(this).is('.open')) {
    $(this)
      .removeClass('open')
      ...
  } else {
    $(this)
      .addClass('open')
      ...
  }
});


切换多个回调
您可以将回调公开为函数引用，并在任何给定时间切换哪些回调处于活动状态：

function openWebsites() {
  $(this)
    .off('click', openWebsites)
    .on('click', closeWebsites)
    .addClass('open')
    ...
}
function closeWebsites() {
  $(this)
    .off('click', closeWebsites)
    .on('click', openWebsites)
    .removeClass('open')
    ...
}
$('#websites').on('click', openWebsites);

使用代理
您可以通过事件委派使用单独的基于状态的事件处理程序。不要将任一事件绑定到
#websites
元素，而是将事件处理程序绑定到最近的稳定父级（我在这里使用
'body'
，但您可能需要使用不同的选择器）：

委托语法将允许在
#网站上调用click回调。打开
元素，尽管它在绑定时不存在于DOM中

当两个状态之间的行为显著不同时，此表单特别有用


使用单个回调函数
如果您只是切换所有内容，我建议使用jQuery的切换函数，一次完成所有操作：

$('#websites').on('click', function () {
  $(this)
    .slideToggle('fast')
    .toggleClass('open')
    .find('span')
      .toggleClass('icon-chevron-right icon-chevron-down');
});

如果两种状态之间有单独的功能，可以使用简单的
If.is
检查：

$('#websites').on('click', function () {
  if ($(this).is('.open')) {
    $(this)
      .removeClass('open')
      ...
  } else {
    $(this)
      .addClass('open')
      ...
  }
});


切换多个回调
您可以将回调公开为函数引用，并在任何给定时间切换哪些回调处于活动状态：

function openWebsites() {
  $(this)
    .off('click', openWebsites)
    .on('click', closeWebsites)
    .addClass('open')
    ...
}
function closeWebsites() {
  $(this)
    .off('click', closeWebsites)
    .on('click', openWebsites)
    .removeClass('open')
    ...
}
$('#websites').on('click', openWebsites);


当您单击并且
打开的
类不是您单击的元素的一部分时，请执行一些操作

当您单击并打开
类是您单击的元素的一部分时，请执行其他操作


通过用文字表达，你可以看到相似之处：你的点击事件在两个动作中都很常见，这是只需要发生一次的事情。在这个点击事件中，您可以使用jQuery的功能来分离点击事件的目的

我冒昧地对您的代码进行了一些优化，为您的变量使用了缓存。如果您在下面的评论中有任何问题，请告诉我

JQuery：

$(document).ready(function() {
  $('#websites').click(function() {
    var websites = $(this),
        webthumbs = $("#webthumbs"),
        websitesSpan = $("#websites span");

    webthumbs.slideToggle('fast');

    if (websites.hasClass("open")) {
      websitesSpan.removeClass('icon-chevron-down').addClass('icon-chevron-right');
      websites.removeClass('open');
    } else {
      websitesSpan.removeClass('icon-chevron-right').addClass('icon-chevron-down');
      websites.addClass('open');
    }
  });
});


当您单击并且
打开的
类不是您单击的元素的一部分时，请执行一些操作

当您单击并打开
类是您单击的元素的一部分时，请执行其他操作


通过用文字表达，你可以看到相似之处：你的点击事件在两个动作中都很常见，这是只需要发生一次的事情。在这个点击事件中，您可以使用jQuery的功能来分离点击事件的目的

我冒昧地对您的代码进行了一些优化，为您的变量使用了缓存。如果您在下面的评论中有任何问题，请告诉我

JQuery：

$(document).ready(function() {
  $('#websites').click(function() {
    var websites = $(this),
        webthumbs = $("#webthumbs"),
        websitesSpan = $("#websites span");

    webthumbs.slideToggle('fast');

    if (websites.hasClass("open")) {
      websitesSpan.removeClass('icon-chevron-down').addClass('icon-chevron-right');
      websites.removeClass('open');
    } else {
      websitesSpan.removeClass('icon-chevron-right').addClass('icon-chevron-down');
      websites.addClass('open');
    }
  });
});

您是否尝试过使用
.hasClass
检查
打开的
类？这有助于调试您是否尝试过
$（'body'）。在（“单击”、“#websites.open”、（function（）{…
上您是否尝试过使用
.hasClass
检查
open
类？这有助于调试您尝试过
$（'body'）。在（“单击”、“#websites.open”、（function（））{…
谢谢！这是最简单的解决方案，所以我选择它作为答案。谢谢！这是最简单的解决方案，所以我选择它作为答案。