Question

奇怪的问题：

我正在创建一个简单的CSS3动画幻灯片面板。使用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');
  }

});

如果您想主动绑定事件，请使用.active选择器.on()。{/ p>

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

旁注：

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

Answer 2

试试这个。
http://jsfiddle.net/JNyzP/2/

忽略下面的内容该死的......我需要30个字符才能发布.... 并且jfiddle链接需要附加到评论的代码

//code goes here

jQuery在点击时删除自己的类

2 个答案: