使用代理

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

Answer 2

使用代理

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

$('body').on('click', '#websites:not(.open)', function () {
  ...executed when not open...
}).on('click', '#websites.open', function () {
  ...executed when open...
});

委托语法将允许在#websites.open元素上调用单击回调，尽管在绑定时它不存在于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);

Answer 3

回应之前的答案，您可以将两个点击处理程序合并为一个：

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

Answer 4

当您点击并且open类不是部分已点击的元素时，请执行某些操作。
当您点击并且open类是您点击的元素的一部分时，请执行其他操作。

通过将其置于单词中，您可以看到相似性：您的点击事件在两个实体中都很常见，这只需要发生一次。在此点击事件中，您可以使用jQuery的 hasClass() 功能来分隔点击事件的目的。

我冒昧地通过对变量使用缓存来优化代码。如果您对以下评论有任何疑问，请与我们联系。

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更改类？

4 个答案:

使用代理

使用单个回调

切换多个回调