Javascript 使用jquery比较各种类名

我有各种各样的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都需要更改为框白色

如果你想看一个例子， 我正在做这个：如果你点击红色框，然后点击左上方第三列中的框，你刚刚创建的红色框左边的框会变成红色。。。但由于它位于另一个纯色框之间，这不是它自己的颜色，它应该变成白色

我有一个循环，在您单击runs之后，我会在这里检查以确保并没有两种不同颜色的框（意味着框位于两个纯色框之间），并且需要将其更改为白色

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



    }

for（变量i=0；i<36；i++）{
console.log（$（“.box[rel=”+[i]+“]]”）attr（'class'））；
class=$（“.box[rel='”+[i]+“']”）attr（'class'）；
}

使用此

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

那么这个呢：

$('.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".match(/blue|purple|white|red/g) // ["blue", "purple"]

---

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

// 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(" ");
    }
});

//为快速查找创建所有颜色名称的映射
变量颜色={
瑞德：没错，
蓝色：是的，
紫色：是的，
怀特：是的
// ...
};
$（“.box”）。每个（函数（）{
//将每个类名分别放入一个数组中
var classes=this.className.split（“”）；
var colorCnt=0，非彩色=[]；
对于（var i=0；i=2）{
非彩色。推（“白色”）；
this.className=nonColors.join（“”）；
}
});

使用

hasClass

的循环将更高效（谁在乎呢），并且更易于阅读和扩展（可能）。这只是一个想法。这不会保留像

border

这样的非颜色类。这是“蛮力”“做事情的方式有很多额外的比较。@imsiso-我只是指出这不是一个非常有效的方式。在实际应用中，效率可能重要，也可能不重要。如果有N个要测试的颜色值以及多个匹配项，那么您正在执行2N个

hasClass（）

操作，每个操作都涉及正则表达式替换操作（在

hasClass（）实现内部）。我的替代方案不执行正则表达式操作，如果对象上有X个实际类名，我的替代方案只执行X个对象查找。@imsiso-解释一下，如果实际对象上总共有10个颜色名称要检查，并且有三个类，那么您将在
hasClass（）中执行20个正则表达式操作
我的实现将进行3次对象查找。好吧，你说得对，你的代码（算法）比我的好。（优化）。（：。但我认为如果你能使用现成的东西来纠正代码的错误。（即jQuery），它会更好。（：@imsiso-因为你的建议不是在数组中查找项。数组有数字索引，而不是字符串索引。你使用对象按字符串查找键。是的，你是对的，我只是读得很快，写得也很快。但是顺便说一句，当我们有很多额外的颜色时，你的代码会更好，但这里的代码将通过clicki运行ng（当添加颜色时）。为什么不建议jquery提供给我们的东西呢？（因为当我们将它包含在页面中时，我们已经加载了它，为什么不使用它呢？那么我在previose post上的评论呢？@imsiso-我在编写或执行更高效的时候使用jQuery。当纯javascript更好时，我不使用它。我将它用于选择器和
。each（）
loop，但我看不出它对我的其余代码有任何帮助。对我来说，做大量的
hasClass（）
比较似乎不是最好的方法。