Question

div有各种类名：

 box blue full

 box blue border purple

 box purple full

 box white purple border

 box purple border

 box purple full

 box blue border

 box white

 box white purple border

每一行都是一个单独的div，带有特定的类名。除了蓝色，紫色和白色的颜色外，还可能有红色和绿色。

我想做的是：我循环遍历每个div，我想检查以确保div没有任何超过1种颜色作为类名（白色和其他颜色除外）

所以例如，“box blue border purple”不行，我需要将其更改为“box white”的类名

所以基本上，任何有两种颜色的div都需要更改为方框白色

如果你想看一个例子，我正在处理这个问题：http://k.p2digital.net/如果你单击红色框，然后点击左边顶部第3列中的框，你刚刚创建的红色框左边的框会变成红色...但由于它是在另一个纯色盒子之间，这不是它自己的颜色，它应该变成白色。

我有一个循环，在你点击运行之后，我会检查以确保没有带有两种不同颜色的框（意味着框位于两个纯色框之间）并且需要更改白色

 for(var i = 0; i < 36; i++){
        console.log($(".box[rel='"+[i]+"']").attr('class'));    
        class = $(".box[rel='"+[i]+"']").attr('class');



    }

Answer 1

使用此

colArr=new Array('red','blue',...);
$('div.box').each(function(){
    var i,index;
    i=0;
    for(index in colArr){
        if($(this).hasClass(colArr[index])){
            i+=1;
        }
    }
    if(i>1){
        for(index in colArr){
            if($(this).hasClass(colArr[index])){
                $(this).removeClass(colArr[index]);
            }
        }
        $(this).addClass('white');
    }
});

Answer 2

如果您想要一个有效的解决方案，您可以计算每个项目中的颜色，如果有太多，请将类名称设置为非颜色类名称加白色：

// create map of all color names for fast lookup
var colors = {
    red: true,
    blue: true,
    purple: true,
    white: true
    // ...
};

$(".box").each(function() {
    // get each class name separately into an array
    var classes = this.className.split(" ");
    var colorCnt = 0, nonColors = [];
    for (var i = 0; i < classes.length; i++) {
        if (colors[classes[i]]) {
            // count the matching color
            ++colorCnt;
        } else {
            // save the non-color class name
            nonColors.push(classes[i]);
        }
    }
    // if too many colors, then set class name to all non-colors plus white
    if (colorCnt >= 2) {
        nonColors.push("white");
        this.className = nonColors.join(" ");
    }
});

Answer 3

这个怎么样：

$('.box').attr('class', function() {
    var m = this.className.match(/blue|purple|white|red/g);
    if (m.length > 1) {
        return this.className.replace(RegExp(m.join('|'), 'g'), '') + ' white';
    }
});

例如，对于包含类box blue border purple的框：

"box blue border purple".match(/blue|purple|white|red/g) // ["blue", "purple"]

http://jsfiddle.net/9U3JH/2/

用jquery比较各种类名

3 个答案: