事件上一点击，第二次点击，而第三次点击

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>

嗨，我试图发展的三次点击基础上的UI在同一个ID，继承人，我试图代码。但是当我渲染时，我得到的错误为

`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)` 

任何人都可以帮助我解决它。我Google搜索，但dint找到了解决方案。

谢谢。

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

OR

如果你想调用重复 '一'， '二'， '三化' 类，那么你应该尝试下面的代码：

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。它的工作原理是拥有一个包含数字的数据属性，使用该数字删除当前的类/背景并增加索引以获取数组中的下一个颜色，并将其设置为颜色和数据属性。

注意那里的模数 - 你有三个选项，所以用％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 3

只有example.You可以通过查看这些代码解决问题。

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

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

您可以通过访问Stackoverflow Link以便在不同课程中切换，从而更好地理解它。