CSKADMIN

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

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

感谢。

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

如果你想打电话给重复的＆＃39;，＆＃39; 2＆＃39;，＆＃39; 3＆＃39;那么你应该尝试下面的代码：

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

试试这可能对你有帮助

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以便在不同的班级之间切换，您可以更好地理解它。

Answer 3

这样，您可以根据单击彩色div重复更改颜色。它的作用是包含一个数字的数据属性，使用该数字删除当前的类/背景并递增索引以获取数组中的下一个颜色并将其设置为颜色和数据属性。

注意那里的模数 - 你有三个选项，所以让％3的计数总是给你一个0,1或2，你可以用它来选择数组中的elemtns作为类名。

＆＃13;

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

＆＃13;

#element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

＆＃13;

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

＆＃13;

Answer 4

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

Html代码

<p>Click me.</p>

Js Code

$(document).ready(function(){
    $("p").toggle(
        function(){$("p").css({"color": "red"});},
        function(){$("p").css({"color": "blue"});},
        function(){$("p").css({"color": "green"});
    });
});

Click on this

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

Here示例。

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

第一次单击，第二次单击和第三次单击时的事件

CSKADMIN

5 个答案: