顺序DIV淡出/淡出点击-类更改

Question

我们的想法是使用一个锚点或按钮，并根据类设置一个函数循环。我已经玩过一些东西，但总是卡住调用相同的函数，即使类已经改变。

对于jQuery不熟练，我甚至不确定这是否可能是我所预见的方式。

我想要的效果是这个按钮可以被垃圾邮件，它将继续在一个循环中添加div，但最终会在最后淡出。

我尝试过的几个例子:JSFIDDLE #1 - JSFIDDLE #2

HTML:

<a class="points first">Points</a>
<div class="ten-points"> 
  10 Points
</div>
<div class="twenty-points"> 
  20 Points
</div>
<div class="no-points"> 
  Lost your points
</div>

JS

$(function () {
 $('.first').click(function () {
   $('.points').removeClass('first').addClass('second');
   $('.ten-points').fadeIn('slow').delay(2000).fadeOut('slow');
 });
 $('.second').click(function () {
   $('.points').removeClass('second').addClass('third');
   $('.twenty-points').fadeIn('slow').delay(2000).fadeOut('slow');
 });
 $('.third').click(function () {
   $('.points').removeClass('third').addClass('first');
   $('.no-points').fadeIn('slow').delay(2000).fadeOut('slow');
 });
});

Answer 1

我相信我得到了它的工作方式你想:)问题是，你没有检查更改后动态当前类。此处更新了jsfiddle

$('.points').click(function () {
  if($('.points').attr("class") === "points first") {
    $('.points').removeClass('first').addClass('second');
    $('.ten-points').fadeIn('slow').delay(2000).fadeOut('slow');
  }else if($('.points').attr("class") === "points second") {
     $('.points').removeClass('second').addClass('third');
       $('.twenty-points').fadeIn('slow').delay(2000).fadeOut('slow');
  }else if($('.points').attr("class") === "points third") {
      $('.points').removeClass('third').addClass('first');
    $('.no-points').fadeIn('slow').delay(2000).fadeOut('slow');
  }

});

Answer 2

你可以这样做:DEMO

$(function () {
    $('.points').click(function(){
        if($(this).hasClass('first')){
            $(this).removeClass('first');
            $(this).addClass('second');
            $('.ten-points').fadeIn('slow').delay(2000).fadeOut('slow');
        }
        else if($(this).hasClass('second')){
            $(this).removeClass('second');
            $(this).addClass('third');
            $('.twenty-points').fadeIn('slow').delay(2000).fadeOut('slow');
        }
        else if($(this).hasClass('third')){
            $('.no-points').fadeIn('slow').delay(2000).fadeOut('slow');
        }
    });
});

Answer 3

取消第一个事件的绑定，并将新事件绑定到锚

$(function () {
    $('.first').click(function () {
        $('.points').removeClass('first').addClass('second');
        $('.ten-points').fadeIn('slow').delay(2000).fadeOut('slow');
        $('.points').unbind("click");
        $('.second').click(function () {
            $('.points').removeClass('second').addClass('third');
            $('.twenty-points').fadeIn('slow').delay(2000).fadeOut('slow');
            $('.points').unbind("click");
            $('.third').click(function () {
                $('.points').removeClass('third').addClass('first');
                $('.no-points').fadeIn('slow').delay(2000).fadeOut('slow');
            });
        });
    });
});