Question

我在SO上看过几篇帖子，但它们的功能和结构都太具体了，而我正在寻找的东西是我或任何人都可以在任何地方使用的更普遍的东西。

我只需要一个按钮，点击它可以在 3 类之间循环。但如果出现需要循环浏览4,5个或更多类的情况，那么脚本可以轻松扩展。

到目前为止，我能够在两个班级之间“循环”，这基本上比骑车更“切换”，所以我有：

HTML：

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">...</div>

jQuery的：

$('.toggle').click(function () {
  $('div').toggleClass('class1 class2');
});

这是一个简单的fiddle。

现在，你会（好吧，我）认为在方法中添加第三个类会有效，但它不会：

$('div').toggleClass('class1 class2 class3');

只会在class1和class3之间开始切换。

所以这就是我遇到初始问题的地方：如何让Toggle按钮顺序通过 3 类循环？

然后：如果有人需要循环到4个，5个或更多课程怎么办？

Answer 1

你可以这样做：

$('.toggle').click(function () {
  var classes = ['class1','class2','class3'];
  $('div').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

Demonstration

Answer 2

这是另一种方法：

if ($(this).hasClass('one')) {
    $(this).removeClass('one').addClass('two');
} else if ($(this).hasClass('two')) {
    $(this).removeClass('two').addClass('three');
} else if ($(this).hasClass('three')) {
    $(this).removeClass('three').addClass('one');
}

Answer 3

var classes = ['class1', 'class2', 'class3'],
    currentClass = 0;

$('.toggle').click(function () {

    $('div').removeClass(classes[currentClass]);

    if (currentClass + 1 < classes.length)
    {
        currentClass += 1;
    }
    else
    {
        currentClass = 0;
    }

    $('div').addClass(classes[currentClass]);

});

这样的东西应该可以正常工作：）

Tinker IO链接 - https://tinker.io/1048b

Answer 4

我将user3353523's answer转换为jQuery插件。

(function() {
  $.fn.rotateClass = function(cls1, cls2, cls3) {
    if ($(this).hasClass(cls1)) {
      return $(this).removeClass(cls1).addClass(cls2);
    } else if ($(this).hasClass(cls2)) {
      return $(this).removeClass(cls2).addClass(cls3);
    } else if ($(this).hasClass(cls3)) {
      return $(this).removeClass(cls3).addClass(cls1);
    } else {
      return $(this).toggleClass(cls1); // Default case.
    }
  }
})(jQuery);

$('#click-me').on('click', function(e) {
  $(this).rotateClass('cls-1', 'cls-2', 'cls-3');
});

#click-me {
  width: 5em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  border: thin solid #777;
  margin: calc(49vh - 2.4em) auto;
  cursor: pointer;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cls-1 { background: #FFAAAA; }
.cls-2 { background: #AAFFAA; }
.cls-3 { background: #AAAAFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click-me" class="unselectable">Click Me!</div>

动态方法

(function() {
  $.fn.rotateClass = function() {
    let $this = this,
        clsList = arguments.length > 1 ? [].slice.call(arguments) : arguments[0];
    if (clsList.length === 0) {
      return $this;
    }
    if (typeof clsList === 'string') {
      clsList = clsList.indexOf(' ') > -1 ? clsList.split(/\s+/) : [ clsList ];
    }
    if (clsList.length > 1) {
      for (let idx = 0; idx < clsList.length; idx++) {
        if ($this.hasClass(clsList[idx])) {
          let nextIdx = (idx + 1) % clsList.length,
              nextCls = clsList.splice(nextIdx, 1);
          return $this.removeClass(clsList.join(' ')).addClass(nextCls[0]);
        }
      }
    }
    return $this.toggleClass(clsList[0]);
  }
})(jQuery);

$('#click-me').on('click', function(e) {
  $(this).rotateClass('cls-1', 'cls-2', 'cls-3');     // Parameters
  //$(this).rotateClass(['cls-1', 'cls-2', 'cls-3']); // Array
  //$(this).rotateClass('cls-1 cls-2 cls-3');         // String
});

#click-me {
  width: 5em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  border: thin solid #777;
  margin: calc(49vh - 2.4em) auto;
  cursor: pointer;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cls-1 { background: #FFAAAA; }
.cls-2 { background: #AAFFAA; }
.cls-3 { background: #AAAAFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click-me" class="unselectable">Click Me!</div>

Answer 5

HTML：

<div id="example" class="red">color sample</div>

CSS：

.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

JS：

$(document).ready(function() {
    var colors = ['red', 'yellow', 'green'];
    var tmp;
    setInterval(function(){
        tmp && $('#example').removeClass(tmp);
        tmp = colors.pop();
        $('#example').addClass(tmp);
        colors.unshift(tmp);
    }, 1000);
});

DEMO

Answer 6

另一个使用classList replace的版本。尚未得到所有浏览器的支持。

＆＃13;

var classes = ["class1", "class2", "class3"];
var index = 0;
var classList = document.querySelector("div").classList;
const len = classes.length;

$('.toggle').click(function() {
  classList.replace(classes[index++ % len], classes[index % len]);
});

＆＃13;

.class1 {
  background: yellow;
}

.class2 {
  background: orange;
}

.class3 {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">
  look at me!
</div>

＆＃13;

Answer 7

这对我有用，我可以随意堆叠，然后轻松环绕。

switch($('div.sel_object table').attr('class'))
    {
    case "A":   $('div.sel_object table').toggleClass('A B'); break;
    case "B":   $('div.sel_object table').toggleClass('B C'); break;
    case "C":   $('div.sel_object table').toggleClass('C D'); break;
    case "D":   $('div.sel_object table').toggleClass('D A'); break;                
    }

Answer 8

循环遍历类的索引并从一个切换到另一个。

var classes = ['border-top','border-right','border-bottom','border-left'];
var border = 'border-top';
var index = 0;
var timer = setInterval( function() {
    var callback = function(response) {
        index = ( ++index == 4 ? 0 : index );
        $(element).html("text").toggleClass( border + " " + classes[index] );
        border = classes[index];
        };
    }, 1000 );

jQuery：在3个类之间切换（最初）

8 个答案:

动态方法