3 

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

任何人都可以帮我解决它。我用谷歌搜索，但找到了解决方案。

谢谢。

管理员

4

5 回答 5

3

只需将您的 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++;
});
于 2017-02-15T07:23:31.147 回答
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 链接在不同类之间切换来更好地理解它。

于 2017-02-15T08:08:13.053 回答
1

这将使您可以根据单击彩色 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>

于 2017-02-15T07:35:24.613 回答
0

仅示例。您可以通过查看此代码来解决问题。

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

点击这个

于 2017-02-15T07:37:53.963 回答
0

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

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

这里的例子。

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

于 2017-02-15T07:37:57.797 回答