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

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

- Riot Zeast Captain

---

这不是 .toggle() 的工作方式。 - Andreas

为什么你把3个函数放进.toggle()里面，这没有任何意义... - JohnnyAW

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”类，则应尝试以下代码：

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

- Rana Ghosh

---

为什么是负数？我不理解。它完全可以工作。 - Rana Ghosh

虽然仅提供代码的答案是可以的，但最好解释一下为什么原始问题的解决方案不起作用，以及你的解决方案如何帮助其他遇到类似问题的人。此外，您没有删除先前的类，因此您的代码并不是“完全可行”的。 - Alexandru Severin

@AlexandruSeverin 我认为你现在应该撤回你的负评了。我已经双方面更新了我的答案。 :) - Rana Ghosh

@RiotZeastCaptain 谢谢 :) - Rana Ghosh

不需要使用 if 语句，只需在末尾使用 flag = (flag + 1) % 3; 即可。 - JohnnyAW

Answer 2

尝试一下，也许可以帮助您。

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链接来了解如何在不同类之间切换，以更好地理解它。

- Shubham Baranwal

Answer 3

这将使你能够通过点击有颜色的div来实现颜色的重复变化。它的原理是使用一个包含数字的数据属性，利用该数字来删除当前类名/背景并递增索引以获取数组中的下一个颜色，并将其设置为颜色和数据属性。

请注意其中的模数运算 - 你有三个选项，因此使用%3计数将始终给出0、1或2，你可以将其用于选择数组中的元素作为类名。

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

- gavgrif

Answer 4

仅供参考。您可以通过查看此代码来解决问题。

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

点击这里

- Girl_engineer

---

你忘了提到这一点：toggle()方法在jQuery 1.8版本中已被弃用，并在1.9版本中删除。我们在此示例中使用了早期版本的jQuery（1.8在脚本标记中），以使其正常工作。 - JohnnyAW

Answer 5

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

$('#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');  
});

这里是一个例子。

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

- Rudnitskyi Vasyl