事件上一點擊，第二次點擊，而第三次點擊

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以便在不同課程中切換，從而更好地理解它。