第一次点击、第二次点击和第三次点击的事件

Question

$('#element').toggle(function(){
  $(this).addClass('one');
},
                     function(){
  $(this).removeClass('one').addClass('two');
},
                     function(){
  $(this).removeClass('two').addClass('three');
});

#element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div id="element"></div>

嗨，我正在尝试基于对同一 ID 的三次点击来开发 UI，这是我正在尝试的代码。但是当我渲染它时，我得到了错误

`Uncaught TypeError: r.easing[this.easing] is not a function
    at init.run (jquery-3.1.1.min.js:3)
    at i (jquery-3.1.1.min.js:3)
    at Function.r.fx.timer (jquery-3.1.1.min.js:3)
    at hb (jquery-3.1.1.min.js:3)
    at HTMLDivElement.g (jquery-3.1.1.min.js:3)
    at Function.dequeue (jquery-3.1.1.min.js:3)
    at HTMLDivElement.<anonymous> (jquery-3.1.1.min.js:3)
    at Function.each (jquery-3.1.1.min.js:2)
    at r.fn.init.each (jquery-3.1.1.min.js:2)
    at r.fn.init.queue (jquery-3.1.1.min.js:3)`

谁能帮我解决它。我用谷歌搜索，但没有找到解决方案。

谢谢。

CSKADMIN

Answer 1

试试这个可能对你有帮助

HTML-

<div class="element"></div>

CSS-

.element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

JAVASCRIPT-

$('.element, .one, .two, .three').click(function() {                             
    this.className = {
       element: 'one', three : 'one', one: 'two', two: 'three'
    }[this.className];
});

您可以通过访问Stackoverflow Link在不同类之间切换来更好地理解它。

Answer 2

只需用这个替换你的jQuery：

var flag = 0, existing_class = '';
var class_value = ['one', 'two', 'three'];
$('#element').click(function(){
    if(flag <= 2)
    {
        $(this).removeClass(existing_class);
        $(this).addClass(class_value[flag]);
        existing_class = class_value[flag];
    }
    flag++;
});

或

如果您想调用重复的“一”、“二”、“三”类，那么您应该尝试以下代码：

var flag = 1, existing_class = '';
var class_value = {1 : 'one', 2 : 'two', 3 : 'three'};
$('#element').click(function(){
    $(this).removeClass(existing_class);
    if(flag > 3) {
        $(this).addClass(class_value[flag % 3 === 0 ? 3 : flag % 3]);
        existing_class = class_value[flag % 3 === 0 ? 3 : flag % 3];
    } else {
        $(this).addClass(class_value[flag]);
        existing_class = class_value[flag];
    }
    flag++;
});

Answer 3

这将使您可以根据单击彩色 div 重复更改颜色。它的工作原理是拥有一个包含数字的数据属性，使用该数字删除当前类/背景并增加索引以获取数组中的下一个颜色并将其设置为颜色和数据属性。

请注意其中的模数 - 您有三个选项，因此使用 %3 进行计数将始终为您提供 0、1 或 2，您可以使用它们来选择数组中的 elemtns 作为类名。

$(document).ready(function(){
  var classes=['one','two','three'];
  
  $('#element').click(function(){
    var current = parseInt($(this).attr('data-index')) ;
    var next = (current+1)%3;
   $(this).attr('data-index' ,next);
   $(this).removeClass(classes[current]).addClass(classes[next]);
    });
  });

#element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the box to change the color</p>
<div id="element" class="one" data-index='0'></div>

Answer 4

如果我理解正确，你想要这个：

$('#element').click(function(){
  if($(this).hasClass('two')) 
    $(this).removeClass('two').addClass('three');

  if($(this).hasClass('one')) 
    $(this).removeClass('one').addClass('two');

  if(!$(this).hasClass()) 
    $(this).addClass('one');  
});

Here 示例。

注意，这里的条件顺序很重要

Answer 5

只是例子。你可以通过查看这段代码来解决问题。

HTML 代码

<p>Click me.</p>

JS代码

$(document).ready(function(){
    $("p").toggle(
        function(){$("p").css({"color": "red"});},
        function(){$("p").css({"color": "blue"});},
        function(){$("p").css({"color": "green"});
    });
});

Click on this