Javascript停止输入多个类名称

Question

我在这里使用JavaScript来解决一个简单的问题。我有这个JS代码，用于突出显示价格表中的行。问题是，如果我一次使用多个类名称，它将停止工作。例如：

<div class="el1 someclass">Hover does not work in this</div>

<div class="el1">Hover does work in this</div>

的JS：

var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes 
var elms = {}; 
var n = {}, nclasses = classes.length; 
function changeColor(classname, color) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 
for(var k = 0; k < nclasses; k ++) { 
    var curClass = classes[k]; 
    elms[curClass] = document.getElementsByClassName(curClass); 
    n[curClass] = elms[curClass].length; 
    var curN = n[curClass]; 
    for(var i = 0; i < curN; i ++) { 
     elms[curClass][i].onmouseover = function() { 
      changeColor(this.className, "#dbdbdb"); 
     }; 
     elms[curClass][i].onmouseout = function() { 
      changeColor(this.className, "transparent"); 
     }; 
    } 
}; 

有人可以帮我请，我在JS一个新手。

谢谢..

Answer 1

dom元素上的className属性返回完整的className;也就是说，如果某个元素有多个类（例如<div class="herp derp"></div>），则className = "herp derp"。

如果你想打电话changeColor在这些多类，尝试这样的事情：

// first, change the order of the arguments on the changeColor function so we can pre-apply the color argument 
function changeColor(color, classname) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 

现在，我们可以改变我们怎么称呼changeColor

// now, where you previously called changeColor, do something like this 
this.className.split(" ").forEach(changeColor.bind(null, "transparent")); 
// we now will call changeColor on all of the classes of this with the appropriate color ("transparent" or "#dbdbdb") 

Answer 2

var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes 
 
var elms = {}; 
 
var n = {}, nclasses = classes.length; 
 
function changeColor(classname, color) { 
 
    var curN = n[classname]; 
 
    for(var i = 0; i < curN; i ++) { 
 
     elms[classname][i].style.backgroundColor = color; 
 
    } 
 
} 
 
for(var k = 0; k < nclasses; k ++) { 
 
    var curClass = classes[k]; 
 
    elms[curClass] = document.getElementsByClassName(curClass); 
 
    n[curClass] = elms[curClass].length; 
 
    var curN = n[curClass]; 
 
    for(var i = 0; i < curN; i ++) { 
 
     elms[curClass][i].onmouseover = function() { 
 
      changeColor(this.className.split(' ')[0], "#dbdbdb"); 
 
     }; 
 
     elms[curClass][i].onmouseout = function() { 
 
      changeColor(this.className.split(' ')[0], "transparent"); 
 
     }; 
 
    } 
 
};

<div class="el1 someclass">Hover does not work in this</div> 
 
<br><br><br><br><br><br> 
 
<div class="el1">Hover does work in this</div>

的问题是与

function changeColor(classname, color) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 

在这里，我们给每个元素分配悬停在那里这个提法

>>   changeColor(this, "#dbdbdb"); 

通过唯一的一个元素并将改变颜色

Answer 3

退房小提琴我创建。问题在于，当您尝试更改颜色时，您将再次传入类名称，并尝试再次选择该元素，而您已经对要更改背景颜色的元素进行引用。所以直接传递元素并更改背景。

http://jsfiddle.net/5eLhsqxv/

`

var n = {}, nclasses = classes.length; 
function changeColor(elm, color) { 
     elm.style.backgroundColor = color; 
} 
for(var k = 0; k < nclasses; k ++) { 
    var curClass = classes[k]; 
    elms[curClass] = document.getElementsByClassName(curClass); 
    console.log(elms[curClass]); 
    console.log(curClass); 
    n[curClass] = elms[curClass].length; 
    var curN = n[curClass]; 
    for(var i = 0; i < curN; i ++) { 
     console.log(elms[curClass][i]); 
     elms[curClass][i].onmouseover = function() { 
      changeColor(this, "#dbdbdb"); 
     }; 
     elms[curClass][i].onmouseout = function() { 
      changeColor(this, "transparent"); 
     }; 
    } 
}; 

`