Question

好吧，所以说我有一段文字，我想通过改变它的类名来改变它的格式。类名都以数组形式组织。（我不确定这是不是最好的方法，所以我很乐意接受相反的建议）

所以说类名是class1，我有数组

[class1, class2, class3, ..., class10]

使用jQuery在鼠标悬停时将类名循环到数组中的下一个项目的最佳方法是什么？

Answer 1

存储全局计数器，并在counter % classes.length之前使用它，其中classes是您的数组。它只是不断递增，但%与数组classes.length的长度一起使用时会返回正确的索引。

var classes = ['class1','class2','class3','class4'];
// Will hold the current iteration's index
// initialized to 0 on page load...
var counter = 0;

function advance() {
  // Remove the current iteration's class based on the counter's current value
  $('#thediv').removeClass(classes[counter] % classes.length);

  // Increment the counter to the next value
  counter++;

  // Add the new iteration's class based on the counter's *new* incremented value
  $('#thediv').addClass(classes[counter % classes.length]);
}

将advance()函数绑定到节点的onmouseover。

$(document).ready(function() {
  $('#yourElement').mouseover(advance);
});

Here is a demo on jsfiddle.net

Answer 2

jsBin demo

假设您的班级被称为.font +和N号码：

<强> CSS：

h1{
  color:purple;
}

.font0{
 color:gray !important;
}

.font1{
 color:red !important;
}

.font2{
 color:blue !important;
}

.font3{
 color:gold !important;
}

<强> jQuery的：

var c = 0;
$('h1').on('mouseenter',function(){  
  $(this).removeClass().addClass( 'font'+ (c++%4) ); 
  // console.log( c%4 ); // TEST counter
});

如果您打算添加/覆盖某些元素存在的样式，

最好使用!important。

在使用.removeClass()添加新内容之前，您需要从元素中删除CLASS。

Answer 3

这是一种不使用计数器的替代方案。

http://jsfiddle.net/mqchen/9LHE5/

var classes = ["red", "blue", "green", "papayawhip"];

$("#something").mouseenter(function(e) {
    classes.push(classes.shift());
    $(this).removeClass(classes[classes.length - 1]).addClass(classes[0]);
});

基本上，它使用shift从数组中删除第一个元素，将其附加到数组的末尾，然后从元素中删除该类（现在位于数组的末尾），并且然后使用push添加数组中的第一个元素（以前是第二个元素）。

编辑：这是一个从数组中的第一个类而不是第二个类开始的修订。 http://jsfiddle.net/mqchen/9LHE5/2/

Answer 4

这样的事情应该有效：

$('#theelement').mouseover(function(e) {
    var classes = ['class1', 'class2', 'class3', 'class10'],
        $this = $(this),
        current = $this.attr('class').split(' ');
    for (var i = 0; i < current.length; i++) {
        lindx = $.inArray(current[i], classes);
        if (lindx != -1) {
            classname = current[i];
            next = lindx + 1 >= classes.length ? classes[0] : classes[lindx + 1];
            $this.toggleClass(classname + ' ' + next);
            break;
        }
    }
});

http://jsfiddle.net/szh7K/

我已经这样做了，而不是使用计数器，因此不需要外部变量。可能更好的实现是使用计数器而不是每次都搜索数组，而是使用$.data将该计数器索引存储在元素本身上。

$('#theelement').mouseover(function(e) {
    var classes = ['class1', 'class2', 'class3', 'class10'],
        $this = $(this),
        cur = $this.data('currentIndex')||0, // if there is no value then we start from scratch
        next = cur+1 >= classes.length ? 0 : cur+1; // if we are at the end we start over

        $this.toggleClass(classes[cur] + ' ' + classes[next]); // toggle the classes
        $this.data('currentIndex', next); // assign the incremented index as current
});

http://jsfiddle.net/jkPps/1/

Answer 5

var classArr = ['class-1', 'class-2', 'class-3', ...],
    classArrLengthNum = classArr.length,
    arrIdxNum = 0;

$(el).mouseover(function () {
    arrIdxNum += 1;
    if (arrIdxNum === classArrLengthNum) {
        arrIdxNum = 0;
    }

     el.attr('class', classArr[arrIdxNum]);
});

Answer 6

首先声明您的类，然后使用变量来跟踪当前索引：

var classes = ["red", "blu", "grn"], index = -1;

接下来设置mouseenter功能：

$("body").on("mouseenter", function(){
    this.className = classes[++index % classes.length];
});

这将从数组中获取下一个可用值，当它在数组末尾时，它将回绕并抓住索引0处的项目。

演示：http://jsfiddle.net/R48FC/

Answer 7

此版本保留了可能在您循环上的元素上设置的任何其他类。它也通过了jsLint; - ）

$.ready(function () {
    'use strict';
    var cycles = ['class1', 'class2', 'class3', 'class4'],
        cycleLength = cycles.length,
        cycleCount = 0; // assumes the first class was already set in the HTML

    $('#element').mouseover(function (ev) {
        var $this = $(this);
        // remove the previous class
        $this.removeClass(cycles[cycleCount]);

        // get the next class
        cycleCount += 1;
        cycleCount %= cycleLength;

        // add new class
        $this.addClass(cycles[cycleCount]);
    });
});

您会注意到，在此working example中，文本保持粗体，因为.b类在从数组中循环遍历类时不会被删除。如果要放置此事件的元素具有子节点，您可能还想使用jQuery.mouseenter()而不是mouseover。

从数组中更改类名？

7 个答案:

Here is a demo on jsfiddle.net

jsBin demo