Question

这个想法是拥有一个单独的锚或按钮，其功能循环取决于类。我已经玩过一些东西，但是即使课程已被更改，也总是被它调用相同的功能。

不能流利使用jQuery，我甚至不确定这是否可能像我预测的那样。

我想要的效果是这个按钮可以被垃圾邮件发送，它会在一个循环中继续添加div，但最终会逐渐消失。

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 here.

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

顺序DIV淡入/淡出onClick - 类更改

3 个答案: