javascript - 从数组更改类名？

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

这是 jsfiddle.net 上的演示

Answer 2

jsBin 演示

假设你的班级被称为.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如果您打算添加/覆盖某些元素现有样式，则可以很好地使用。

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

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

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