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

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

只需将您的 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++;
});

或

如果你想重复调用 'one'、'two'、'three' class 那么你应该尝试下面的代码：

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 2

这样您就可以通过单击彩色 div 来重复更改颜色。它的工作原理是 data-attribute 包含一个数字，使用该数字删除当前 class / 背景并增加索引以获得数组中的下一个颜色并将其设置为颜色和数据属性。

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

$(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 3

只能example.You看这段代码才能解决问题

Html Code

<p>Click me.</p>

Js Code

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

Click on this

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-

<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];
});

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

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

Event on First click, Second click, and Third click

html

jquery

jquery-3

CSKADMIN