单击jQuery删除自己的类

Question

奇怪的问题：

我正在创建一个简单的，CSS3 3动画幻灯片面板。动画是使用jQuery触发的。我有两个版本，一个有效，另一个不起作用。

版本。

功能失调版的代码

$('.mark').click(function () {
    $('.box').addClass('box-up');
    $('.box').removeClass('box-down');
    $(this).addClass('active');
    $(this).removeClass('inactive');
});
$('.active').click(function () {
    $('.box').addClass('box-down');
    $('.box').removeClass('box-up');
    $(this).addClass('inactive');
    $(this).removeClass('active');
});

这是我想要工作的jQuery，不幸的是它不能工作。第二个版本的预期结果是允许用户单击<div class="mark"></div>打开，关闭滑出面板。

我做错了什么？任何帮助都将不胜感激。

Answer 1

当页面加载时，jQuery将绑定事件。它不主动地寻找要绑定事件的元素。因此，在您的示例中，当页面加载时，jQuery将查找$('.active')，而不会发现任何。

相反，您可以做的是将一个单击事件绑定到$('.mark')，并有一个if语句来检查它是否是活动的。

$('.mark').click(function () {

  // check if mark is inactive
  if($(this).hasClass('inactive'){
    $('.box').addClass('box-up');
    $('.box').removeClass('box-down');
    $(this).addClass('active');
    $(this).removeClass('inactive');
  }

  // check if mark is active
  else if($(this).hasClass('active'){
    $('.box').addClass('box-down');
    $('.box').removeClass('box-up');
    $(this).addClass('inactive');
    $(this).removeClass('active');
  }

});

如果您想要主动绑定事件，请考虑使用.on()和.active的选择器。

$('.box').on('click', '.active', function () { /* code here */ });

附带说明：

我认为，同时具有向上/向下和活动/非活动状态是多余的。您可以让没有类的元素被关闭，并且添加一个类是打开的，反之亦然。

Answer 2

试试这个。

http://jsfiddle.net/JNyzP/2/

忽略下面的内容

该死的.我需要30个手柄来投递.

而jfiddle链接需要附加到注释中的代码。

//code goes here