$('#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)`
谁能帮我解决一下。我用谷歌搜索,但还是找到了解决方案。
谢谢。
CSK管理员
最佳答案
只需将您的 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++;
});
关于jquery - 第一次点击、第二次点击和第三次点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42242875/