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

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

这是一个简单的小提琴。

现在，您会（好吧，我）认为向该方法添加第三个类会起作用，但它不会：

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

发生的事情是切换开始发生在class1并且class3仅发生在之间。

所以这就是我最初遇到的问题：如何让切换按钮依次循环通过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];
  });
});

示范

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]);

});

类似的东西应该可以正常工作:)

修补程序 IO 链接 - https://tinker.io/1048b

Answer 4

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

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 5

我将user3353523 的答案转换为 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 6

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

演示

Answer 7

另一个使用classList replace. 并非所有浏览器都支持。

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

.class1 {
  background: yellow;
}

.class2 {
  background: orange;
}

.class3 {
  background: red;
}

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

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